Fotos vervormt na toevoegen van height/width

kbcs

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.

kbcs

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.

nuet

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

kbcs

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

kbcs

De eerst link + De bovenste foto bevat mag weg, maar ik zie niet hoe ik kan bewerken.

nuet

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

ReneV

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!