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.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Brak potrzebnych mi informacji"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Zbyt skomplikowane / zbyt wiele czynności do wykonania"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Nieaktualne treści"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problem z tłumaczeniem"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problem z przykładami/kodem"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Inne"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Łatwo zrozumieć"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Rozwiązało to mój problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Inne"
}]