获取图像来拉伸 div

StackOverflow https://stackoverflow.com/questions/41198

  •  09-06-2019
  •  | 
  •  

题

如何让图像拉伸高度 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;
}

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

有帮助吗？

解决方案

添加 overflow:auto; 到 .product1

其他提示

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

当你这样做时，在该图像上留一点边距，这样文本就不会与它相抵触。

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

.product + * { clear: left; }

足以做同样的事情，而无需强迫您手动调整 div 之后的代码。

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

该类应该如下所示：

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

这看起来像是一份工作 清除修复 大部头书 ...

请尝试以下操作：

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

    width:500px;
    height:500px;
}

display:inline  
float:left

是你的问题吗

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top