Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Fotos vervormt na toevoegen van height/width

Vandaag wat tijd besteed aan het toevoegen van de breedte / hoogte bij fotos, want html 5 (checkers) hebben dat graag.

Het effect echter is dat nu de fotos vervormt worden.

In CSS staat een max-widht en max-height ingesteld en tot vandaag werkte dat goed (er werk geschaald).

Oplossing ? Toevoegen werghalen zou kunnen, maar dat gaan die html checkers weer zeuren.

Reacties

  • Even een voorbeeldje:

    https://kbcs.eu/?which=ass&what=used&shi=com:3

    Let bv. op de harddisks in het midden, die zijn te breed (horizontaal vervormd).

    Let bv. op de dimm's, die zijn te smal = te hoog (verticaal vervormd).


    Dit is een geheel vernieuwde site en dit is 1 van de laatste dingen die opgelost moeten worden.
  • bewerkt ma 25 apr 2016
    PMPosts: 878
    Wat ik zie: de verhoudingen kloppen niet.
    Voorbeeld van de deze geheugenbank: Geheugen Desktop-DDR-2
    Inline style geeft aan:
    width: "450"
    height: "112"
    In je css schaal je hem terug tot:
    .ass_ov_img_img3 {
    max-width: 210px;
    max-height: 125px;
    Deze verhouding klopt niet:
    Als je de width terugschaalt van 450 naar 210 zou de heigt naar verhouding uitkomen op 52
    450 -> 210
    112 -> 52
    En bij jou staat in je css de heigt op 125 max
    Dus:
    .ass_ov_img_img3 {
    max-width: 210px;
    max-height: 52px;
    geeft je het goede resultaat met behoud van de inline style

    Verhouding berekenen:
    Originele verhouding plaatje: 450/112=4.02 afgerond
    In je css: width 210: dus ---> 210/4.2=52.24 afgerond
  • Dat klopt, want daar houd ik geen rekening mee, ik verwacht dat css dat voor me doet.

    En niet alle fotos zijn even groot, want dezelfde foto wordt voor alle weergaves gebruikt.

    Zonder de height /width ging het goed, dan werd er gescaled, waarbij de ratio van de foto correct gehouden werd.

    Dus hoogte = 450 / 210 => 2,1 (ongeveer)

    en daar hoort dus bij een hoogte van 125 / 2.1 => 60.

    En dat werd zo gedaan totdat ik die breedte / hoogte toevoeg.

    Een voorbeeld, waarbij het goed + fout gaat:

    https://kbcs.eu/index.php?which=ass&what=egu/prod:8966

    De bovenste foto bevat

    En aangezien de ruimte beperkt is (en dat in css vast-ligt en ik dat moeilijk voor alle situaties bij kan houden), want dat is bv. anders bij 3 of 4 fotos per regel, hoort (vind ik tenminste) css dat te doen, ook na toevoegen van de height / width van de foto.

    Eigenlijk is dat hele height / width toevoegen in mijn ogen obsolete en begrijp ik niet waarom men dat zo graag heeft, eigenlijk alleen maar balast voor de browsers. Ga het denk maar weghalen.

    Als je het volgende gebruikt, dan is dat zonder de toevoeging -> correct geschaald, maar niet altijd vullend (en niet nodig). width / height wordt niet toegevoegd.

    https://kbcs.eu/?which=ass&what=used:geheugendesktop-ddr-2&shp=com:3


    Nu gaat het fout:

    https://kbcs.eu/?which=ass&what=used:geheugendesktop-ddr-2&shp=nrm


  • De eerst link + De bovenste foto bevat mag weg, maar ik zie niet hoe ik kan bewerken.
  • bewerkt ma 25 apr 2016
    PMPosts: 878
    Waarom ging het eerst wel goed (zonder width en heihgt toegevoegd inline):
    Je browser scaled je image automatisch naar rato als je in je css aangeeft: width maximaal 210
    je hoeft dan alleen de max-width aan te geven; de height scaled ie automatisch naar rato.
    Op het moment dat je wel width en height in je html gaat gebruiken, vervalt de automatisch scale functie van je browser. Hij zal wel nog luisteren naar max-width in je css maar zal de heigth niet meer automatisch voor je scalen.
    https://kbcs.eu/?which=ass&what=used:geheugendesktop-ddr-2&shp=nrm
    In je css geef je nu aan: max-width: 180 en max-height: 170
    Hij zet de width nu op 180 en als het naar rato was, zou de height op 44.8 uit moeten omen. Maar dat doet ie nu niet mee automatisch.
    Als jij in je css aangeeft max-height 170 zit ie er altijd onder; dus kun je net zo goed weglaten.
    Je moet hem nu met je max-height dwingen tot 44.8

    BTW: bewerken post op gear icoon klikken

    gear.jpg
    357 x 109 - 8K
    gear.jpg 7.6K
  • PMPosts: 732
    Gewoon in de img tag de height en width weglaten.

    Bij een img zijn maar twee dingen verplicht en dat is de src en de alt.
    w3c geeft aan dat height en width niet verplicht zijn!
    If it's not fun, you're not doing it right!
Login of Registreer om te reageren.