tag <img>
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
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">
O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2024-03-13 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2024-03-13 UTC."],[],[]]