我有这个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;
}
和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>
我想做的是使图像在x轴上被隐藏(而不是第一个金发女郎在第二行,我希望她被必要裁剪,但仍保留在第一行等等).当我做overflow-x隐藏它将无法工作.对这个有什么想法？
解决方法
由于#portrait不允许图像溢出
您需要一个额外的容器,具有指定的宽度,将这些图像保存在其中.
像这样做：
您需要一个额外的容器,具有指定的宽度,将这些图像保存在其中.
像这样做：
<div id="portrait">
<div id="wrapper">
your images
...
然后申请
#wrapper{
height:30%;
overflow:hidden;
width: 1000px; /* it is only important to be bigger then parent for one image width size */
}
.image{
height: 100%;
