How to make an image fit the height of a container when rotated?

Question

I have an image which I rotate with css rotate property to 90deg.

Problem, once rotated, the image keep its size and is bigger than the container.

How to fix this with TailwindCSS ?

Here is the code :

<div class="p-8">
  <div class="h-[315px] w-[560px] border-2 border-solid">
    <img src="https://source.unsplash.com/user/c_v_r/1900x800" class="h-full w-full rotate-90 transform object-fill" />
  </div>
</div>

Does this answer your question? https://stackoverflow.com/questions/13674086/how-to-rotate-image-with-css-only — Zachiah, Jun 29 '23 at 14:59
Do you have the option to wrap the image with an additional `
`? — stickyuser, Jun 29 '23 at 17:54

score 0 · Accepted Answer · answered Jun 30 '23 at 14:37

If you wrap the image in a <div> and rotate that, you can then set the image to object-contain so the image fits the height of the container.

<div class="p-8">
  <div class="h-[315px] w-[560px] border-2 border-solid">
    <div class="h-[560px] w-[315px] origin-top-left translate-x-[560px] rotate-90">
      <img src="https://source.unsplash.com/user/c_v_r/1900x800" class="h-full w-full object-contain" />
    </div>
  </div>
</div>

https://play.tailwindcss.com/CXZoglKryG

How to make an image fit the height of a container when rotated?

1 Answers1