时间戳

首页 > 解决方案 > 在将内容对齐div的右下角时使用溢出隐藏？

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

问题描述

我有一个 200 像素宽 x 150 像素高的 div。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，但在成品中，这将拉入不同的图像。

标签： htmlcssoverflowpositioning

解决方案

您不能使用相对于图像的位置来做到这一点。

但是您可以将relativeandabsolute一起使用。

如果父母有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>

推荐阅读