Javascript 在容器jQuery css中拟合旋转图像

我开发了这个脚本来旋转一个按钮点击图像

问题

它旋转得很好，但问题是一旦图像旋转90度或270度，它就不适合主容器

我希望它在旋转90/270度后与容器相匹配

$（文档）.ready（函数（）{
变量度=0；
$（“按钮”）。单击（函数旋转e）{
度数+=90；
//$（'.img'）.addClass（'rotated'）；//用于一次旋转
$（“.content”）.css({
“变换”：“旋转（“+度+”度）”，
“-ms变换”：“旋转（“+度+”度）”，
“-moz变换”：“旋转（“+度+”度）”，
“-webkit变换”：“旋转（“+度+”度）”，
“-o变换”：“旋转（“+度+”度）”
});
})
});
。旋转{
变换：旋转（90度）；
-ms变换：旋转（90度）；
-moz变换：旋转（90度）；
-webkit变换：旋转（90度）；
-o变换：旋转（90度）；
}
.img{
过渡：所有0.5s缓解；
}
.集装箱{
边框：1px纯蓝色；
显示：内联块；
宽度：300px；
保证金：0自动；
}
div{
边框：1px纯蓝色；
显示：内联块；
}

旋转
使用
缩放
在旋转时缩小图像，使用
角度%180
了解图像的方向以缩小图像


$（文档）.ready（函数（）{
变量度=0；
$（“按钮”）。单击（函数旋转e）{
度数+=90；
如果（度%180==0）
$（“.content”）.css({
“变换”：“旋转（“+度+”度）比例（1）”
});
其他的
$（“.content”）.css({
“变换”：“旋转（“+度+”度）比例（0.8）”
});
})
});
。旋转{
变换：旋转（90度）；
-ms变换：旋转（90度）；
-moz变换：旋转（90度）；
-webkit变换：旋转（90度）；
-o变换：旋转（90度）；
}
.img{
过渡：所有0.5s缓解；
}
.集装箱{
边框：1px纯蓝色；
显示：内联块；
宽度：300px；
保证金：0自动；
文本对齐：居中；/*已添加*/
}
div{
边框：1px纯蓝色；
显示：内联块；
过渡：所有.5s线性；/*已添加*/
}

旋转
使用
缩放
在旋转时缩小图像，使用
角度%180
了解图像的方向以缩小图像


$（文档）.ready（函数（）{
变量度=0；
$（“按钮”）。单击（函数旋转e）{
度数+=90；
如果（度%180==0）
$（“.content”）.css({
“变换”：“旋转（“+度+”度）比例（1）”
});
其他的
$（“.content”）.css({
“变换”：“旋转（“+度+”度）比例（0.8）”
});
})
});
。旋转{
变换：旋转（90度）；
-ms变换：旋转（90度）；
-moz变换：旋转（90度）；
-webkit变换：旋转（90度）；
-o变换：旋转（90度）；
}
.img{
过渡：所有0.5s缓解；
}
.集装箱{
边框：1px纯蓝色；
显示：内联块；
宽度：300px；
保证金：0自动；
文本对齐：居中；/*已添加*/
}
div{
边框：1px纯蓝色；
显示：内联块；
过渡：所有.5s线性；/*已添加*/
}

旋转
那么你想要缩放图像还是缩放容器？缩放图像以适应始终固定的容器宽度那么你想要缩放图像还是缩放容器？缩放图像以适应始终固定的容器宽度非常好的代码，我期待添加数千行新代码，谢谢。记住！非常好的代码，我期待添加数千行新代码，谢谢。记住！