css - 获取图像以拉伸 div

Question

如何获取图像以拉伸DIV班级的高度？

目前它看起来像这样：

但是，我希望将DIV其拉伸以使其image适合，但我不想调整图像的大小。

这是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;
}

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

score 27 · Accepted Answer

27

添加overflow:auto;到.product1

于 2008-09-03T06:11:49.363 回答

score 6 · Accepted Answer

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

当你在它的时候，在那个图像上留一点边距，这样文本就不会撞到它。

score 3 · Accepted Answer

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

.product + * { clear: left; }

做同样的事情就足够了，而不会强迫您在 div 之后手动调整代码。

score 3 · Accepted Answer

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

这是该类的外观：

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

score 2 · Accepted Answer

2

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

于 2008-09-06T20:27:43.307 回答

score 2 · Accepted Answer

尝试以下操作：

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

    width:500px;
    height:500px;
}

score 1 · Accepted Answer

display:inline  
float:left

是你的问题

浮动使父母的宽度不会被孩子拉伸，尝试放置没有浮动的图像。如果你把浮子取下来，它应该会给你想要的效果。
另一种方法是确保您在父元素的末尾清除浮动，以便它们不会影响范围蔓延。

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

css - 获取图像以拉伸 div

7 回答 7

Related

Reference