获取图像来拉伸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;
}

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

Answer 1

将overflow:auto;添加到.product1

Answer 2

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

当你在它的时候，在该图像上加上一点余量，这样文字就不会对它产生影响。

Answer 3

假设@John Millikin是正确的，代码

.product + * { clear: left; }

如果不强迫你在div之后手动调整代码，

就可以做同样的事情。

Answer 4

您可以使用的一个技巧是将<div>的overflow属性设置为隐藏。这会强制浏览器计算框的物理大小，并修复浮动图像的奇怪重叠问题。它将使您免于添加任何额外的HTML标记。

以下是该课程的外观：

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

Answer 5

这看起来像clearfix给我的工作......

Answer 6

尝试以下方法：

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

    width:500px;
    height:500px;
}

Answer 7

display:inline  
float:left  

是你的问题

浮动使父项宽度不被子项拉伸，尝试放置没有浮点的图像。如果你取下浮子，它应该会给你想要的效果 另一种方法是确保在父元素的末尾清除浮点数，以便它们不会产生蠕变范围。

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