使图片拉伸以填满div

Question

如何使图片填满一个 DIV 类的高度?

目前效果如下:

然而，我想要 DIV 拉伸以适应图片，但我不想调整图片大小。

这是 DIV（灰色框）的 CSS:

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
}

应用于图像的CSS：

.product{
    display: inline;
    float: left;
}

那么，我该如何解决这个问题呢？

- joshhunt

Answer 1

将overflow:auto;添加到.product1

- John Sheehan

Answer 2

在图像后的标记中插入类似于<div style="clear:left"/>的内容。有点凌乱，但这是我发现的最简单的方法。

在此过程中，给该图像加上一些边距，以便文本不会与其紧密相连。

- John Millikin

---

我认为自闭合 DIV 不恰当？ - Xarcell

Answer 3

假设@John Millikin是正确的，那么这段代码：

.product + * { clear: left; }

只需这样做即可完成相同的操作，而无需强制您在div之后手动调整代码。

- Domenic

Answer 4

有一个技巧可以使用，就是将<div>的overflow属性设置为hidden。这会强制浏览器计算盒子的物理大小，并解决浮动图像重叠的奇怪问题。这样可以避免添加任何额外的HTML标记。

这是类应该看起来的样子:

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
    overflow: hidden;
}

- Jeremy Kratz

Answer 5

请尝试以下方法：

.Strech
{
    background:url(image.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;

    width:500px;
    height:500px;
}

- Palanikumar

Answer 6

这看起来像是需要使用 clearfix ...

- David Heggie

---

是的......是的，确实如此，谢谢你指出我一开始就应该知道的事情... - Trevor Hart

Answer 7

display:inline  
float:left  

你的问题是

浮动会使父元素的宽度不被子元素拉伸，尝试在没有浮动的情况下放置图像。如果去掉浮动，应该会给你想要的效果。
另一种方法是确保在父元素末尾清除浮动，以防止它们影响到其他元素。

更新：查看您的链接后，显示的高度问题是因为浮动没有被清除。

- ChanChan