4

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?

fightstarr20
  • 11,682
  • 40
  • 154
  • 278
  • 1
    Possible duplicate of [Rotated elements in CSS that affects their parent's height correctly](https://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affects-their-parents-height-correctly) – JasonB Jan 29 '18 at 01:55
  • There are numerous posts on the subject and always the problem that after rotation the image runs out of the parent frame. I have a completely new approach: [https://stackoverflow.com/a/49867985/2320007](https://stackoverflow.com/a/49867985/2320007), using scale. (0.8 is ok, but if your image has a different ratio you can recalculate it based on height/width). – Sarah Trees Jan 20 '20 at 12:40

2 Answers2

2

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>
Carlton
  • 838
  • 6
  • 16
  • But that cuts off the image, I still want to see the whole image – fightstarr20 Jan 29 '18 at 01:33
  • Does your updated answer rely on knowing the dimensions beforehand? – fightstarr20 Jan 29 '18 at 01:42
  • 1
    Yes it does rely on it. There is no way to do it for dynamic images without introducing some JavaScript or using an inline style when rendering the image element. – Carlton Jan 29 '18 at 02:11
  • Thanks, I think I will look at using Javascript to handle things dynamically Seems like a good choice – fightstarr20 Jan 29 '18 at 02:22
  • 2
    No worries. Just do something like get image height and width. Get the difference and then apply a margin top and bottom to the image equal to half of the calculated difference. Let me know if you need any additional assistance with it. good luck – Carlton Jan 29 '18 at 02:26
0

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.

Nico Nekoru
  • 2,840
  • 2
  • 17
  • 38
Aslam
  • 11
  • 1
  • 2