一个盒子中有一张图片,现在想让这张图片旋转90度,并且图片还是在盒子内部
时间: 2024-03-12 16:44:31 浏览: 18
可以使用以下 CSS 代码实现将图片旋转90度,并且图片仍在盒子内部:
```css
.container {
position: relative;
width: 200px; /* 盒子宽度 */
height: 200px; /* 盒子高度 */
overflow: hidden; /* 隐藏溢出部分 */
}
img {
position: absolute;
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%) rotate(90deg); /* 平移和旋转 */
max-width: none; /* 不限制最大宽度 */
max-height: none; /* 不限制最大高度 */
}
```
这段代码的核心是使用`position: absolute`将图片定位到盒子的中心,并使用`transform`将其旋转90度。为了使图片仍然在盒子内部,需要将盒子设置为`position: relative`,并使用`overflow: hidden`隐藏图片的溢出部分。
为了让图片在水平和垂直方向上居中,使用了`top: 50%`和`left: 50%`将图片的中心点放置在盒子的中心点,然后使用`transform: translate(-50%, -50%)`将图片向上和向左平移50%的距离,使其水平和垂直方向上居中。
最后需要注意的是,由于旋转后的图片的宽度和高度会交换,因此需要将`max-width`和`max-height`设置为`none`,取消最大宽度和最大高度的限制。