Højde og Bredde på Billeder med CSS
Find ud af om du bør angive højde (height) og bredde (width) direkte på dine img elementer, eller om du kan nøjes med CSS.
Edited: 2017-11-11 15:00
Med CSS kan man nemt angive højde og bredde på billeder, som er indsat med img elementer. Det gør man ved at bruge width og height egenskaberne i sit StyleSheet. Man behøver ikke angive højde og bredde på selve img elementerne, men hvis man vil undgå at siden "hopper" når den indlæser, kan det stadig være en god ide.
Når man validere sin kode, kan man godt opleve at validatoren advare imod manglende width og height attributter. Det er dog ikke en fejl i koden, og man kan sagtens undvære dem.
Advarslen betyder, at dine billeder muligvis vil skabe små "hop" i visningen af din side, imens den indlæses. Når først en side er indlæst, så er der ingen problemer. Problemet er, at billeder i nogle browsere vil blive vist som 0 gange 0 pixel, imens de bliver downloaded. Når billedet er hentet, og browseren endeligt viser det, så vil det "skubbe" sidens indhold længere ned på siden. Det kan give indtryk af, at siden "hopper" når den indlæses.
Den bedste måde at undgå problemet på, er ved at skabe en side som indlæses så hurtigt, at brugerne ikke når at bemærke eventuelle hoppen og skubben. Alternativt kan man indsætte width og height attributterne direkte på sine img elementer:
<img src="mit-fjaes.jpg" width="100px" height="100px">
På denne måde vil pladsen allerede være reserveret til billedet, og dermed undgår man at siden hopper når den indlæses.
Højde og bredde med CSS
Det er oftest nemmest at styre udsendeende på en hjemmeside i CSS koden, frem for at gøre det i sidens HTML. Det gælder også når det kommer til styling af billeder. Så med mindre man har en teknisk grund til, at angive dimensionerne for billedet direkte på img elementerne, så bør man altså holde sig til at bruge CSS.
Via en simpel selector, som vist i eksemplet nedenfor, kan man styre udseendet for samtlige billeder på en side. Hvis derimod man skriver height og width attributterne direkte på sine billeder, så skal man altså redigere hver billede enkeltvis, hvilket kan være en meget stor opgave på større sider.
img {
width: 40%;
max-width: 400px;
}
Det er meget normalt kun at angive en width (bredde) for billeder, fordi browseren så selv vil udregne højde og bredde forhold.
Når man laver en responsiv hjemmeside, kan man med fordel bruge CSS max-width egenskaben til at begrænse billedets bredde. Det er en fordel, fordi man derved undgår at billedet bliver større end det rent faktisk er. Samtidig kan det også give en del fleksibilitet, at billedet bruger procent i width attributten.
Fortæl os hvad du tænker: