Html 溢出：隐藏不适用于图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20295042/
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
Overflow: hidden is not working with images
提问by user3050963
I have this CSS code:
我有这个 CSS 代码：
#portrait{
height: 300px;
width: 550px;
border: solid;
margin-right: auto;
margin-left: auto;
word-wrap:break-word;
overflow:hidden;
}
.image{
float:left;
height: 30%;
border:solid 1px;
padding: 1px;
posit ion:relative;
}
and the html:
和 html：
<div id="portrait">
<img class="image" src="http://media.indiatimes.in/media/photogallery/2012/Dec/best_images_of_2012_1355117665_1355117684.jpg"/>
<!--Can't pull all images in here because it thinks my question is spam-->
<img class="image" src="http://adrao.com.sapo.pt/soajo_sol.jpg"/>
<img class="image" src="http://www.befrielsen1945.dk/temaer/internationalt/krigensgang/kilder/ofre.jpg"/>
<img class="image" src="http://ionenewsone.files.wordpress.com/2009/08/oj-simpson-smiling-murder-trial.jpg"/>
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/>
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/>
</div>
What I want to do is to make the image overflow in the x-axis hidden (instead of the first blonde woman being on the second row I want her to be cropped as necessary but yet remain on the first row and so on). When I do overflow-x hidden it won't work. Any thoughts on this one?
我想要做的是使图像在 x 轴上溢出隐藏（而不是第一个金发女人在第二行，我希望她根据需要被裁剪，但仍留在第一行等等）。当我执行 overflow-x hidden 时，它将不起作用。对这个有什么想法吗？
回答by Hrvoje Golcic
Since #portrait is not allowed to overflow the images then you need one additional containerwith the specified width that will hold these the images inside. Do it like this:
由于 #portrait 不允许溢出图像，因此 您需要一个额外的具有指定宽度的容器来容纳这些图像。像这样做：
<div id="portrait">
<div id="wrapper">
your images
...
And then apply
然后申请
#wrapper{
height:30%;
overflow:hidden;
width: 1000px; /* it is only important to be bigger then parent for one image width size */
}
.image{
height: 100%;
回答by Ronen Festinger
I had a problem where my video disappeared when I used overflow hidden. Turned out I needed to set the width of the container and not only the height. And I didn't have to use any positioning on the container.
我有一个问题，当我使用溢出隐藏时，我的视频消失了。结果我需要设置容器的宽度，而不仅仅是高度。而且我不必在容器上使用任何定位。
