我如何获得一张图像来拉伸DIV类的高度？

当前看起来像这样：

http://i36.tinypic.com/34osrdg.png

但是，我希望拉伸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;
}

那么，我该如何解决呢？

解决方案

回答

display:inline  
float:left

是你的问题

浮动会使父母的宽度不会被孩子拉长，请尝试将图像放置在没有浮动的情况下。如果我们将浮子取下，它应该会给我们带来理想的效果。
另一种方法是确保在父元素的末尾清除浮点数，以使它们不影响蠕变。

更新：查看链接后，显示的高度问题是因为未清除浮标。

回答

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

而且，当我们使用它时，请在该图像上留一点空白，以使文本不会与它对接。

回答

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

.product + * { clear: left; }

在不强迫我们在div之后手动调整代码的情况下，可以做相同的事情。

回答

在.product1中添加overflow：auto;。

回答

我们可以使用的一种技巧是将<div>的溢出属性设置为隐藏。这迫使浏览器计算盒子的物理尺寸，并解决了浮动图像的奇怪重叠问题。这样可以避免我们添加任何额外的HTML标记。

这是该类的外观：

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

回答

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