使用 jquery 和 CSS 旋转和调整图像大小

Posted 2023-02-25

【中文标题】使用 jquery 和 CSS 旋转和调整图像大小

【英文标题】：Rotate and resize image with jquery and CSS

【发布时间】：2013-07-11 10:42:45

【问题描述】：

我有一张图片 img.png，尺寸：width=300px，height=200px。 此图像位于 div 容器中：

<div class='thumbnail'> <img id='imgX' src='img.png'> </div>

CSS 是：

div.thumbnail 
    width: 500px;
    height: 300px;


div.thumbnail > img 
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;

图像显示得很好。但是，我可以动态地使用 jquery 旋转图像：

$("#imgX").css("transform","rotate(90deg)");

这样，图像会旋转，但它不在 div 容器中。我怎样才能把它放在里面？

【问题讨论】：

请向我们展示您使用的图像？

可能最好旋转整个缩略图容器 $(".thumbnail").css("transform","rotate(90deg)");

【参考方案1】：

不知道是不是你的意思，但是呢

div.thumbnail overflow:hidden;

【讨论】：

好主意！但我宁愿调整图像大小。但最简单的方法是什么？

var image = $("#imgX"); image.css("width",image.height()); 因为在旋转 90 度后，垂直边缘称为宽度。但仍需要一些改进。