Html 展开DIV内的图像

调整大小后，如何扩展图像以使其具有与div相同的高度？或者如何用颜色填充图像留下的空白？

为容器div设置背景色

我认为这将获得您想要的结果：

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

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

div{
宽度：50px；
高度：100px；
}
部门经理{
身高：100%；
}

---

现在，图像将填充到容器div的高度，并用其纵横比缩放其宽度。这可能会导致图像超出容器div的预期宽度边界，但请小心。

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

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

只有较新版本的Safari和Opera才支持背景大小属性。对于其他浏览器，可以使用“背景色”属性使用颜色填充图像周围的空白，如下所示：

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将使用指定的背景色填充图像周围的空白。

我使用背景图像属性。据我所知，这在当前浏览器中是不可能的。要防止图像扩展超过容器div，请使用最大宽度：100%；最大高度：100%；沿宽度：100%；身高：100%；