Blir bildene dine "dratt" i høyden eller bredden?


Bilder som vises slik som bildet til høyre er veldig lett å unngå...

 

Kort forklart

Bilder skaleres automatisk i bredden for å unngå at store bilder kuttes når de ligger i en boks eller vises på en skjerm som er smalere enn selve bildet. Høyden på bildet vil derimot alltid være den høyden som er satt, dersom det er satt en høyde på bildet.
Ikke sett høyde på bilder så vil nettleseren til leseren justere denne helt selv - og bildene dine vil alltid se riktige ut.
 


Grundigere forklart - og hvordan du fikser det

Html for et bilde kan f.eks. se slik ut:
<img src="mittbilde.jpg" width="1000" height="500" />

Denne koden sier at bildet skal være 1000 pixler bredt og 500 pixler høyt. Det fungerer fint i en blogg som er 1000 pixler, eller mer, bred, men bredden avgjøres egentlig av oppløsningen på skjermen man leser på. Mobile enheter kan for eksempel ha en oppløsning på alt fra pinglete 312 pixler på vertikal mobilskjerm til utrolige 3840 pixler på horisontal visning på enkelte nyere nettbrett. Derfor skaleres bildebredden slik at den passer til skjermen de vises på.

På mobil, og også i mange bloggdesign, skaleres normalt bilder ned (aldri opp - det gjør dem uklare) til 100% av tilgjengelig bredde i innlegget - for å unngå "avkuttede bilder" når bildet er bredere enn boksen det ligger i. Problemet er at høyden ikke kan bestemmes på samme måte. Så, når bildet ditt fra eksempelet over skaleres fra 1000px bredde til f.eks. 720 pixler skjermbredde vil høyden fremdeles være 500 pixler og bildet vil derfor se dratt ut.
 


 

Løsningen er altså å ikke fortelle hvor høyt et bilde skal være. Da fikser nettleseren bredde-/høydeforholdet helt selv og bildet vil alltid se riktig ut, enten du ser det på PC, en liten mobiltelefon eller et nettbrett.
 

Når du laster opp et bilde til et innlegg på blogg.no blir det ikke satt noen høyde på bildet. Kun den bredden du valgte ved opplastingen blir satt. Det samme gjelder dersom du setter inn et bilde fra arkivet eller fra Yay Images, kun bredden du velger blir satt. Men, dersom du drar et bilde større eller mindre med "håndtakene" på bildet (denne funksjonen er ikke en del av blogg.no's editor, men noe som finnes i enkelte nettlesere) vil det alltid bli satt en fast høyde på bildet, og bildet vil oppleves dratt når bredden autoskaleres. Trenger du å endre bredden på bildet bør du derfor bruke innstillingene som er innebygd i editoren. Dobbeltklikk på et bilde i innlegget for å åpne boksen for bildeinnstillinger.
 



 

Dersom feltet for høyde allerede har et tall når du åpner denne boksen kan du fjerne det ved å først åpne hengelåsen og deretter slette tallet. Husk å trykke på "OK" etterpå.

 

LES MER OM:

AVANSERTE BILDEINNSTILLINGER

HVORDAN MIDTSTILLE BILDER?

3

Så smart! :)

Takk for tips :)

Hei! Tusen takk for tipset!

Skriv en ny kommentar