在将内容对齐div右下角时使用隐藏的溢出？

Question

I have a div at 200px wide x 150px height. The image in the div will be bigger. I want to align the image inside to the bottom right corner while using the overflow hidden setting on the rest of the image. So only the bottom right corner of the image should be visible.

I can't figure out how to use relative positioning in this case because there will be different sized images in the div. I need whatever image is in the div to automatically lock alignment to the bottom right regardless of size. Is this possible?

Here's my code:

 <div align="right" valign="bottom" style="width:200px; height:105px; border: 1px dotted black; overflow: hidden;"> <div style="position:relative; bottom:0px; right:0px;"> <img src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" width="300" height="300" /> </div> </div> 

For the example I have the image set to 500x300px but in the finished product this will be pulling in different images.

Answer 1

You can't do it using position relative to the image.

But you can use the relative and absolute together.

If the parent has the position: relative and the child has the position: absolute , the child will use the parent's area as limits to self positioning

Try this:

 <div align="right" valign="bottom" style="width:200px; height:105px; border: 1px dotted black; overflow: hidden; position: relative"> <div style="position:absolute; bottom:0px; right:0px;" > <img src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" width="300" height="300"/> </div> </div> 

Answer 2

You can use absolute position for image and set its right and bottom properties to 0.

 .container { width: 200px; height: 150px; position: relative; overflow: hidden; } img { position: absolute; right: 0; bottom: 0; } 

 <div class="container"> <img src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" alt=""> </div> 

Answer 3

In order to position an element relatively to its parent, you need first to set position: relative on the parent container.

HTML File :

<div class="outer">
    <div class="inner">
        <img src="https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg" width="300"
        height="300" />
    </div>
</div>

CSS File :

.outer {
    width: 200px;
    height: 105px;
    border: 1px dotted black;
    overflow: hidden;
    position: relative;
}

.inner {
    position: absolute; 
    bottom: 0px; 
    right: 0px;
}

I've provided a JSFiddle to help you with that.

Hope that helps!