Overflow: hidden is not working with images

css, html, image

Solution

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%;

Problem

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? ``` #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; position: relative; } ``` ``` <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> ```

Original source