英文:
How to make an image fit the height of a container when rotated?
问题
我有一个图像，我使用CSS的rotate属性将其旋转为90度。
问题是，一旦旋转，图像保持其大小，比容器大。
如何在TailwindCSS中解决这个问题？
这是一个playground。
这是代码：
<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>
英文:
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 a playground
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>
答案1
得分: 0
如果您将图像包装在一个<div>中并旋转它，然后可以将图像设置为object-contain，使图像适应容器的高度。
<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
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论