CODEWITHSUNDEEP
htmlcss
user3680688
user3680688

Reputation: 426

overflow hidden not working, position of parent relative

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!

Upvotes: 0

Views: 1808

Answers (3)

Alex Wilson
Alex Wilson

Reputation: 2419

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

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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/

Upvotes: 1

Wijnand M
Wijnand M

Reputation: 390

You need to put the:

 overflow: hidden;

on the container: .user_container

Upvotes: 1

Related Questions