溢出:隐藏不适用于图像 [英] Overflow: hidden is not working with images
问题描述
我有这个 CSS 代码:
#portrait{高度:300px;宽度:550px;边框:实心;右边距:自动;左边距:自动;自动换行:断字;溢出:隐藏;}.图片{向左飘浮;高度:30%;边框:实心1px;填充:1px;位置:相对;}
和 html:
<img class="image" src="http://media.indiatimes.in/media/photogallery/2012/Dec/best_images_of_2012_1355117665_1355117684.jpg"/><!--无法将所有图像都拉到此处,因为它认为我的问题是垃圾邮件--><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"/>
我想要做的是使图像在 x 轴上溢出隐藏(而不是第一个金发女人在第二行,我希望她根据需要被裁剪,但仍留在第一行,依此类推).当我执行 overflow-x hidden 时,它将不起作用.对此有什么想法吗?
既然#portrait 不允许溢出图片,那么您需要一个额外的容器,其具有指定的宽度来容纳这些图像.这样做:
<div id="包装器">你的图片...然后申请
#wrapper{高度:30%;溢出:隐藏;宽度:1000px;/* 重要的是对于一个图像宽度大小来说比父级更大 */}.图片{高度:100%;
I have this CSS code:
#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:
<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?
解决方案 Since #portrait is not allowed to overflow the images then
you need one additional container with the specified width that will hold these the images inside.
Do it like this:
<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%;
这篇关于溢出:隐藏不适用于图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文