Rotating images, container width remains the same

When you rotate an element with transform: rotate();, the container element is not resized accordingly with the new content. How can you make the container take the new size?

Thank you.

That’s because the transform is only visual, it doesn’t affect other elements.
One could say the container isn’t aware of the visual change of the child, much like relative positioning it remains the same in the flow though it appears to have moved.

Here is a thread at SO trying to work around the issue:

1 Like

Thank you.

I’ve read a lot on this subject, including the stackoverlow subject above, I know why remains like that but I couldn’t find anything to resolve the problem.

I think I am going to rotate the images and use two sets.

1 Like

Hi there virstea,

wouldn’t using this image…

…instead, be the ideal solution. :biggrin:


There was an answer in the SO thread using the padding hack to cater for the height of a rotated element (assuming the element is only rotated at 90degrees). In your code that would be like so:

  padding:100% 0 0;
.inner-wrapper img{margin-top:-100%}

Unfortunately that will not collapse the width to the objects dimensions and there will still be a gap from the image to the next element.

If you only have the one image then you could do as coothead suggests and just rotate the image in your paint package. If you are doing this for multiple images you could force the issue and set the width and min-height of the container to match the rotated image but you would need to know these dimensions beforehand or use js to update dynamically.

Perhaps it may be important for us to understand how this rotated effect is going to be useful to you or how you envisage using it?

The simple answer is that transformed elements do not affect the flow of surrounding content which is why they can animate smoothly.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.