Ustawienie atrybutów width i height w tagach <img> pomaga zapobiegać zmianom układu. Ta informacja pozwala przeglądarce zarezerwować odpowiednią ilość miejsca na obraz.
Ustaw atrybuty
widthiheight: wartości tych atrybutów powinny być zgodne z wymiarami samego obrazu (czyli jego wewnętrznym rozmiarem), a nie z wymiarami, w których obraz będzie wyświetlany.W razie potrzeby dostosuj styl obrazu: dodanie atrybutów
widthiheightmoże spowodować inny sposób renderowania obrazu (w zależności od obecnego stylu obrazu). W wielu przypadkach można to naprawić, dodającheight: autolubwidth: autodo istniejącego stylu.
| Poprzednie style CSS | Zmień na |
|---|---|
| img { width: 100%; } | img { width: 100%; height: auto; } |
| img { max-width: 100%; } | img { max-width: 100% height: auto; } |
| img { height: 100%; } | img { height: 100%; width: auto } |
HTML
<img width="267" height="400" src="dog.jpg">