Question

我正在使用像这样的CSS变换旋转图像......

＆＃13;

.content1{background:teal;}
.imagecontainer{text-align:center;background:wheat;width:100%;}
img{transform: rotate(90deg);}
.content2{background:pink;}

＆＃13;

<div class ="content1">Content 1</div>

<div class ="imagecontainer">
    <img src="https://dummyimage.com/300x200/000/fff">
</div>

<div class ="content2">Content 2</div>

＆＃13;

但是旋转的图像突然从它的容器中分离出来并重叠了它上面和下面的div。

有没有办法阻止这种情况发生？

Answer 1

尝试将overflow: hidden;添加到图片容器中。旋转具有不同宽度/高度的图像时，您需要使用边距对其进行偏移。请参阅下面的更新答案：

更新回答

.content1 { 
    background: teal;
}
           
.imagecontainer {
    text-align: center;
    background: wheat;
    width: 100%;
    overflow: hidden; /* Prevent overflowing of nested elements */
}

img {
    display: block;
    transform: rotate(90deg);
    margin: 50px auto; /* account for 100px width/height difference */
}

.content2 {
    background: pink;
}

<div class="content1">Content 1</div>

<div class="imagecontainer">
    <img src="https://dummyimage.com/300x200/000/fff">
</div>

<div class="content2">Content 2</div>

Answer 2

我遇到了同样的问题，我只是在图像中添加了填充，它就不再重叠了。尝试将此代码添加到 .image-container 类

.image-container{
   padding : 20px;
}

我认为这不是完美的解决方案，但它有帮助。

CSS变换 - 图像旋转重叠的其他div

2 个答案: