overflow hidden not working, position of parent relative

Question

I want to crop images that are too tall. But "overflow: hidden" is not doing anything.

Here is my HTML:

<body id="index_body">
  <div id="panel">
     <div class="user_container">
       <img class="photo_thumbnail" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRRK4PrgJXJ05LYI33B5rqX4xh18UIUQ_kqplT_rXheF5bqPHrE"/>            
     </div>
     . . .
  </div>
</body>

Here is my CSS:

#index_body {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

#panel {
    display: inline-block; 
    width: 90%;
    margin: auto;
    text-align: left;
}

.user_container {
    margin: 15px;
    border-radius: 5px;
    position: relative;
    width: 170px;
    height: 170px;
    z-index: 1;
    display: inline-block;
    border: 2px dashed blue;
}

.photo_thumbnail {
    margin: 0;
    z-index: 1;
    position: absolute;
    border-radius: 5px;
    border: 2px gray solid;
    width: 170px; 
    overflow: hidden;
 }

See it in action here: http://jsfiddle.net/9oLzynbx/1/.

Others have reported an issue with overflow hidden when the img it's attributed to is not in a parent div with position: relative. See: overflow: hidden not working. But that's not my issue.

Thanks for any help!

put it on the div `.user_container` instead of the image - http://jsfiddle.net/9oLzynbx/6/ — Pete, Sep 22 '14 at 12:33
As @Pete notes the property overflow works for the container not the element that overflows http://jsfiddle.net/9oLzynbx/10/ — DaniP, Sep 22 '14 at 12:37

score 1 · Accepted Answer · answered Sep 22 '14 at 12:35

1

You need to put the:

 overflow: hidden;

on the container: .user_container

answered Sep 22 '14 at 12:35

Wijnand M

372
1
3
12

score 1 · Answer 2 · answered Sep 22 '14 at 12:35

Give overflow: hidden to the .user_container:

.user_container {
    margin: 15px;
    border-radius: 5px;
    position: relative;
    width: 170px;
    height: 170px;
    z-index: 1;
    display: inline-block;
    border: 2px dashed blue;
    overflow: hidden;
}

Preview:

Fiddle: http://jsfiddle.net/praveenscience/9oLzynbx/7/

score 1 · Answer 3 · answered Sep 22 '14 at 12:36

1

try this code

.user_container {
    margin: 15px;
    border-radius: 5px;
    position: relative;
    width: 170px;
    height: 170px;
    z-index: 1;
    display: inline-block;
    border: 2px dashed blue;
    overflow: hidden;
}

answered Sep 22 '14 at 12:36

Alex Wilson

2,421
11
13

overflow hidden not working, position of parent relative

3 Answers3

Preview:

Fiddle: http://jsfiddle.net/praveenscience/9oLzynbx/7/

Linked