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?
To activate the overflow property enclose the image, within a div of a particular width and height, and set overflow:hidden . This will ensure that the base container will retain its structure, and any image overflow will be hidden behind the container.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
One of the most common causes of overflow is fixed-width elements. Generally speaking, don't fix the width of any element that should work at multiple viewport sizes.
Set the div with a width or height, (otherwise it won't know whether something is overflowing). Then, add the overflow:hidden; CSS property-value pair.
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%;
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With