CODEWITHSUNDEEP
htmlcss
fightstarr20
fightstarr20

Reputation: 12598

CSS Transform - Image Rotate overlapping other divs

I am rotating an image using a CSS transform like this...

https://jsfiddle.net/7ed1aqrt/

.content1{background:teal;}
.imagecontainer{text-align:center;background:wheat;width:100%;}
img{transform: rotate(90deg);}
.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>

But the rotated image is breaking out of it's container and overlapping the divs above and below it.

Is there a way to stop this from happening?

Upvotes: 4

Views: 5944

Answers (2)

Aslam
Aslam

Reputation: 11

I had the same issue, I just added padding to the image and it stopped overlapping. Try adding this code to the .image-container class

.image-container{
   padding : 20px;
}

I don't think it's the perfect solution, but it helps.

Upvotes: 0

Carlton
Carlton

Reputation: 838

Just try adding overflow: hidden; to your image container. When rotating an image that has different widths/height then you will need to offset it with a margin. See the updated answer below:

Updated answer

.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>

Upvotes: 2

Related Questions