Mikä olisi järkevä tapa estää sivun pomppiminen kuvien latautuessa? Ennen se hoitui kätevästi kuvien width- ja height -attribuuttien avulla.
Nyt, kun kuvat ovat responsiivisia CSS:n width- ja height -ominaisuuksien auto-arvot ylikirjoittavat kuvan koon attribuutit:
img {
height:auto;
max-width:100%;
}Mikä olisi paras keino estää kuvien pomppiminen sivulla?
hirveää kuraahan tuo reflow:n estäminen on responsiivisilla kuvilla. välillä olen lyönyt kuvasuhteen mukaisesti paddingiä, välillä säätänyt containerin koon serveripuolella kuvan koon mukaan, välillä javascriptillä ja miten milloinkin. varsinkin dynaamisten kuvien kanssa tuo responsiivisuus on melko ärsyttävää luoda.
Jos asetat kuvan ulottuvuuksia tuohon tapaan, niin ei kai ole mitään tapaa, jolla selain voisi tietää ulottuvuudet, ennen kuin se on sekä saanut koko kuvan että muotoillut sivua muutoin tarpeeksi pitkälle.
Mutta kuvien responsiivinen käyttö on ensisijaisesti sitä, että kuvien koko valitaan tiettyyn leiskaan sopivaksi. Siis sinulla on vähintään kaksi olennaisesti erilaista leiskaa, joiden välillä valitaan @media-kyselyllä. Ja niistä kummassakin voi hyvin olla kuvia, joilla on tarkat pikselimääräiset koot, jotka on valittu leiskaan sopiviksi. Siis esimerkiksi yhdessä leiskassa vaikkapa yksi 1200 pikselin levyinen kuva, toisessa sama kuva 600 pikselin levyisenä. Ja tällöin myös korkeudet voidaan ilmoittaa pikseleinä.
Joskus voi olla aiheellista ottaa kuva niin leveänä kuin suinkin mahtuu, mutta tällä on sitten omat haittansa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.