CSS 获取图像以拉伸 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41198/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting image to stretch a div
提问by Josh Hunt
How can I get an image to stretch the height of a DIVclass?
如何获取图像以拉伸DIV类的高度？
Currently it looks like this:
目前它看起来像这样：
However, I would like the DIVto be stretched so the imagefits properly, but I do not want to resize the `image.
但是，我希望将DIV其拉伸以使其image适合，但我不想调整`图像的大小。
Here is the CSS for the DIV(the grey box):
这是DIV（灰色框）的 CSS ：
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
应用于图像的 CSS：
.product{
display: inline;
float: left;
}
So, how can I fix this?
那么，我该如何解决这个问题？
回答by John Sheehan
Add overflow:auto;to .product1
添加overflow:auto;到.product1
回答by John Millikin
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
在图像后面的标记中，插入类似<div style="clear:left"/>. 有点乱，但这是我找到的最简单的方法。
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
当你在它的时候，在那个图像上放一点边距，这样文本就不会与它对接。
回答by Domenic
Assuming @John Millikin is correct, the code
假设@John Millikin 是正确的，代码
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
无需强迫您在 div 之后手动调整代码就足以做同样的事情。
回答by Jeremy
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
您可以使用的一个技巧是将<div>的溢出属性设置为隐藏。这会强制浏览器计算框的物理大小，并修复浮动图像的奇怪重叠问题。它将使您免于添加任何额外的 HTML 标记。
Here's how the class should look:
以下是该类的外观：
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
回答by Palanikumar
Try the following:
请尝试以下操作：
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
回答by DevelopingChris
display:inline
float:left
is your problem
是你的问题吗
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
浮动使父宽度不会被子项拉伸，请尝试放置没有浮动的图像。如果你取下浮子，它应该会给你想要的效果。
另一种方法是确保您在父元素的末尾清除浮动，这样它们就不会影响范围蔓延。
Update:After viewing your link Your height issue as displayed, is because the floats are not being cleared.
更新：查看您的链接后，您显示的高度问题是因为浮标没有被清除。
