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来帮助您。

希望有帮助！

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

3 个答案: