I've got a pretty simple layout where I'm trying to clip images to a fixed size div. Clipping to the right works perfectly but I don't understand why the bottom isn't clipped in the same way.

Styles:

div.panel
{
    float:left;
    width:300px;
    height:200px;
    background-color:Red;
    position:relative;
}

div.panel_inset
{
    margin:5px;
    overflow:hidden;
}

Markup:

<div class="panel"> 
    <div class="panel_inset"> 
    <img src="blue.png" width="300px" height="200px"/> 
    </div> 
</div>

3 answers

Saiyan 113
1
point

sorry iam not sure if thats what you are looking for but you could try adding this css to your div.panel_inset

div.panel_inset {
     bottom:5px;
     left:5px;
     overflow:hidden;
     position:absolute;
     right:5px;
     top:5px;
}
Answered over 8 years ago by Saiyan
0
points

If you're able to set the height of either panel_inset or the image this will solve it:

Add this:

.panel {overflow: hidden;} (you can optionally remove the float now if you wish)

And set the height

.panel_inset {height: 190px;)

or

.panel_inset im {height: 190px;}

Answered over 8 years ago by John Catterfeld
  • Thanks John, That helps though this is part of a more complicated layout system where the outer panel div could be an arbitrary size and I just want to clip a contained image with a 5px margin around it. I was hoping not to have to duplicate the heights on the inner divs but I guess that will do. I must say though I still don't understand what's going on here. ie: why is the horizontal behaviour different to the vertical? cantabilesoftware over 8 years ago
Ktash 1851
0
points

From the comment above, you could try setting a negative margin around the panel_inset, and set overflow hidden on the panel

.panel { overflow: hidden; }
.panel_inset { margin: -5px;  } 
Answered over 8 years ago by Ktash