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

有一种方法可以在CSS3中执行此操作：

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

只有较新版本的Safari和Opera才支持background-size属性。对于其他浏览器，您可以使用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将在图像周围填充指定的背景颜色。

Answer 3

设置容器div的背景颜色

在DIV中展开图像

3 个答案: