在將內容對齊div右下角時使用隱藏的溢出？

Question

我有一個div，寬度為200px x高度為150px。 div中的圖像將更大。 我想在其余圖像上使用溢出隱藏設置時，將圖像內部對齊到右下角。 因此，只有圖像的右下角應該可見。

在這種情況下，我無法弄清楚如何使用相對定位，因為div中會有不同尺寸的圖像。 我需要div中的任何圖像以自動將對齊方式鎖定到右下角，而不管大小如何。 這可能嗎？

這是我的代碼：

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

對於示例，我將圖像設置為500x300px，但在最終產品中，它將拉入不同的圖像。

Answer 1

您無法使用相對於圖片的位置來完成此操作。

但是您可以同時使用relative和absolute 。

如果父母的position: relative ，而孩子的position: absolute ，則孩子將使用父母的區域作為自我定位的限制

嘗試這個：

 <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

您可以使用圖像的絕對位置並將其right和bottom屬性設置為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

為了相對於父元素定位元素，首先需要在父容器上設置position: relative 。

HTML檔案：

<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文件：

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

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

我提供了一個JSFiddle來幫助您。

希望有幫助！