Görüntü, CSS ile ekran yüksekliğine nasıl yeniden boyutlandırılır?

Tüm ekranı doldurmak isteyen bir çok kullanıcının aksine, sadece görüntü yüksekliğini önemsiyorum. Görüntünün en boy oranını, görüntünün yeniden boyut genişliğini korurken, herhangi bir boyutta bir görüntü oluşturmak için CSS'yi (tercihen JavasScript'i değil) kullanarak, mümkün olan maksimum tarayıcı penceresinin% 100'üne kadar doldurun yüksekliği tarayıcıya önemli değildir.Görüntü, CSS ile ekran yüksekliğine nasıl yeniden boyutlandırılır?

bu html ile çalışıyorum:

<div class="images"> 
    <img/> 
</div>

Çok teşekkür ederim!

kaynak

2011-09-09 Mohammad

img { height:100% }

veya açık olmasını istiyorsanız

img { height:100%; width:auto; }

yükseklik% 100: http://jsfiddle.net/jmarikle/vz7q2bnk/
genişliği% 100:

Bu cevap biraz dikkat gerekli: DÜZENLEME

http://jsfiddle.net/jmarikle/vz7q2bnk/1/ . Demo bozuldu ve genellikle karışıklık oldu. Yeni görüntülerle güncelledim, görüntülerin satır içi doğasını telafi etmek için güncellenmiş kural ve vücut ve html öğelerinin normalleştirilmiş yüksekliği ve genişliği.

kaynak

2011-09-09 21:12:46

@Mohammad size yardımcı olmaktan mutluluk duyar :) –

Bağlantılarınız çalışmıyor ... – Vickel

@Vickel Aslında jsfiddle sunucu sorunları yaşıyor gibi görünüyor. 500 dahili sunucu hatası alıyorum. –

Bu overkill olabilir:

.img { 
    position: absolute; 
    height: 100% 
    top: 0; 
    bottom: 0; 
}

kaynak

2011-09-09 21:14:57 Joe

Hayır, kapsayıcı olmadığı sürece konumlandırma, üst veya alt alana ihtiyacınız dışında doğru fikir bu değil. Önemli bölüm, otomatik olarak –

genişliğini bırakıyor. Evet, Joseph'in üstte veya altta gerçekten gerekli olmadığını söylediği gibi. – Mohammad

uh .. bunun içinde gördüğüm şeyden, gerçekten yapmanız gereken şey kapınıza bakmanız. Bu yöntem esas olarak elemanı konteynırdan kaldırır. görüntülerinizi div 'pozisyonunu yapmaya çalışın: mutlak; sol: 0; üst: 0; yükseklik: 100%'. –

Ayrıca vh bir göz atmak isteyebilirsiniz, vw, vmin ve Vmax CSS birimleri - pretty well supported olan. % 100 yükseklik here elde etmeyi açıklayan iyi bir makale var.

BTW - boşluktan kaçının: bu istenmeyen bir kenar boşluğu ekleyebilir. Boşluğun kaldırılması, bir kayan nokta eklenmesi veya font-size: 0 hack'in kullanılması bu sorunu giderir. Ayrıca, diğer yöntemleri kullanırken, gövde ve html öğeleri için height: 100%'u ayarlamayı unutmayın.

kaynak

2014-11-19 20:45:37

Görüntü, CSS ile ekran yüksekliğine nasıl yeniden boyutlandırılır?

cevap

İlgili konular