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

Question

我有一个 div，宽 200 像素 x 高 150 像素。 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。

如果 parent 有 position: relative 而 child 有 position: absolute，child 将使用 parent区域作为自我定位的限制

试试这个：

<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

为了相对于其父元素定位元素，您需要先在父容器上设置 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 来帮助你。

希望对您有所帮助！

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

Using overflow hidden while aligning the contents the bottom right of a div?

html

css

positioning

overflow