<img> etiketi
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
<img>
etiketlerinde width
ve height
özelliklerinin ayarlanması, düzen kaymalarını önlemeye yardımcı olur. Bu bilgiler, tarayıcının resim için doğru miktarda alanı ayırmasına olanak tanır.
width
ve height
özelliklerini ayarlayın: Bu özelliklerin değerleri, resmin gösterileceği boyutlar yerine resmin boyutlarıyla (yani dışsel boyutu) eşleşecek şekilde ayarlanmalıdır.
Resim stilini gerektiği gibi ayarlayın: Resmin mevcut stiline bağlı olarak, width
ve height
özelliklerinin eklenmesi resmin farklı şekilde oluşturulmasına neden olabilir. Çoğu durumda, mevcut stile height: auto
veya width: auto
ekleyerek bu sorunu düzeltebilirsiniz.
Önceki CSS stili |
Şununla değiştir: |
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">
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2024-03-13 UTC.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2024-03-13 UTC."],[],[]]