tag <img>

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 width i height: 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 width i height może spowodować inny sposób renderowania obrazu (w zależności od obecnego stylu obrazu). W wielu przypadkach można to naprawić, dodając height: auto lub width: auto do 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">