2012-03-16 14 views
7

Bir resmim var ve pencerenin boyutu ne olursa olsun genişliğin tarayıcı penceresini doldurmasını istiyorum.Tarayıcı penceresinin genişliğini doldurmak için bir görüntü uzatın

Bunu HTML ve CSS'de nasıl yapabilirim?

+0

[img yüksekliği pencere yüksekliğinden daha az olduğunda [CSS veya jQuery ölçeklenebilir arka plan görüntüsünün altında NO beyaz boşluk ile olası kopyası] (http://stackoverflow.com/questions/5072750/css-or-jquery-scalable-background- image-with-no-beyaz-boşluk-altında-altında-img) – Joseph

cevap

5
<img src="filename.jpg" alt="alt text" width="100%" /> 

Bu, görüntünün kabının tarayıcı penceresi kadar geniş olduğunu varsayar.

Sen genişliğinde% 100'lük bir yüksekliğe bir div ekleyebilirsiniz
+1

bu, HTML 5 için geçerli değildir. HTML5'de, değer piksel cinsinden olmalıdır. – sbagdat

+0

@sbagdat İlginç. Bunu bilmiyordum. Yüzde neden seçenek olarak kaldırıldı? –

+0

muhtemelen resimler büyüdükçe kaliteyi kaybediyorlar. Burada w3c linki: http://www.w3schools.com/html5/att_img_width.asp – sbagdat

10

, ayrıca set görüntünün genişliği ve yüksekliği% 100

<div id="wrapper"> 
    <img src="http://lorempixel.com/200/200" /> 
</div>​​​​​​​​​​ 

CSS:

#wrapper, img{ 
    width:100%; 
    height: 100%; 
} 

jsfiddle

1
<div class="fixpixel"> 
    <img src="ImagePath" /> 
</div>​​​​​​​​​​ 

CSS dosyası

.fixpixel img{ 
height: auto; 
background-position: center; 
background-repeat: no-repeat; 
background-size: cover; 
} 
İlgili konular