Question

我在互联网上寻找解决这个问题的方法，但我无法找到适合我案例的解决方案。我试图在其容器的左侧进行IMG溢出而不是在右侧溢出。我尝试添加direction: rtl;但它没有用。这是我正在处理的图片： pic

提前致谢

Answer 1

如果您有关于图像高度和宽度的信息，可以将图像设置为背景并控制其左侧值。您需要为background-position-x设置一个负值，这样就会出现从左侧开始的溢出。

＆＃13;

.img {
    overflow: hidden;
    background-repeat: no-repeat;
    width: 400px;
    height: 400px;
    background-position-x: -322px;
    background-image: url(https://i.stack.imgur.com/KyxiY.png);
}

＆＃13;

<body>
<div class="img"/>
</body>

＆＃13;

或者，如果你想使用img标签。

＆＃13;

.img {
    position: relative;
    left: -144px;
}

.container{
    overflow: hidden;
}

＆＃13;

<body>
<div class="container"><img class="img" src="https://i.stack.imgur.com/KyxiY.png"/></div>
</body>

＆＃13;

如何在容器左侧溢出IMG？ CSS

1 个答案: