溢出：隐藏，相对亲不工作

问题描述

[我想让我的作品看起来像这样] [1] [但是我的工作现在是这样的] [2]

垂直灰线是Web边框，所有其他div的宽度都不会超过该线。

现在，用户可以拖动并查看图像的其余部分。如果隐藏了图像的多余部分，那就更好了。

这是我的代码：

html：

<div class="container-div">
   <img class="the-img" src="image.png" alt="">
</div>

css：

.container-div {
    text-align: right;
    position: relative;
}

.the-img {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: auto;
    margin-top: 1vh;
    margin-left: -75.5vw;
}

另外，在我确切的代码中，.container-div的所有父div已经是position: relative;

我该如何解决？谢谢！ [1]：https://i.stack.imgur.com/glA2q.png [2]：https://i.stack.imgur.com/LcBpO.png

解决方法

您是否尝试过在overflow: hidden上添加.container-div？

,

您绝对应该在父元素上放置class="share"。 然后，您应该为其设置高度，浏览器无法在父元素上设置正确的高度，因为其子元素没有任何高度（由于绝对位置）。

overflow: hidden