在DIV中展开图像

Question

如何在调整大小后将图像展开成与div具有相同的高度？或者，如何用图像填充图像剩余的空白区域？

Answer 1

我认为这将让你你想要的结果：

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

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

图像现在将填充到容器div的高度和其方面扩展它的宽度比。这可能会导致图像超出容器div的预期宽度边界，但要小心。

Answer 2

设置背景色为div容器

Answer 3

有一种方法在CSS3做到这一点：

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

背景-size属性在Safari和Opera的新版本仅支持。对于其他浏览器，您可以填写使用background-color属性的图像周围留下了一个彩色的空白，就像这样：

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

或者，在速记：

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

使用此代码将导致图像在支持CSS3的浏览器（最新的Opera，Safari和Firefox）中伸展。旧版浏览器和IE将在指定背景颜色的图像周围留出空白。