Görüntüyü genişlet DIV

Question

Yeniden boyutlandırıldıktan sonra bir görüntüyü div ile aynı yüksekliğe sahip olacak şekilde nasıl genişletebilirim? Ya da görüntünün bıraktığı beyaz alanı nasıl bir renkle doldurabilirim?

Answer 1

Bu size istenen sonucu almak olacağını düşünüyorum konteyner div için bir arka plan rengi:

<style> 
    div { 
    width:50px; 
    height:100px; 
    } 

    div img { 
    height:100%; 
    } 
</style> 
<div> 
    <img src='path/to/img.gif' /> 
</div> 

görüntü şimdi konteyner div yüksekliğine dolduracak ve yönü ile genişliğini ölçeklendirir oranı. Bu, görüntünün konteyner div'in amaçlanan genişlik sınırlarını aşmasına neden olabilir, bu yüzden dikkatli olun.

div {background-image: url(path/to/image); background-size: 100%} 

background-size özelliği yalnızca Safari ve Opera'nın yeni sürümlerinde desteklenir:

Answer 2

Seti

Answer 3

CSS3 bunu yapmanın bir yolu yoktur. kısacası,

div { 
    background-image: url(path/to/image); 
    background-size: 100%; 
    background-color: #000000; 
    } 

Veya: Diğer tarayıcılar için, bunu gibi background-color özelliğini kullanarak bir renk ile resmin etrafında sol boşluk doldurabilir

div {background:#000000 url(path/to/image) no-repeat; background-size:100%} 

bu kodu kullanarak olacak Görüntünün CSS3 etkin tarayıcılarda (en yeni Opera, Safari ve muhtemelen Firefox) esnemesine neden olur. Eski tarayıcılar ve IE, belirtilen arka plan rengiyle dolu görüntünün etrafındaki boşluklara sahip olacaktır.