Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overflow: hidden is not working with images

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?

like image 390
user3050963 Avatar asked Nov 30 '13 00:11

user3050963


People also ask

How do I make an image overflow hidden?

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.

Why does overflow hidden not work?

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.

Why overflow is not working in CSS?

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.

How do I hide content of overflow?

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.


2 Answers

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%;
like image 199
Hrvoje Golcic Avatar answered Oct 22 '22 08:10

Hrvoje Golcic


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.

like image 3
Ronen Festinger Avatar answered Oct 22 '22 07:10

Ronen Festinger