现实中的问题
在css中 , 有时候对一个图片进行旋转的时候 , 如果图片是一个不规则的多边形 , 一旦旋转 , 就会将底层的div显示出来 , 不能保证图片所在的div填满 , 这时候就要对图片的旋转时放大缩小进行计算
以正方形为例的解决方法
如下面代码所示
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./assets/demo1.css">
</head>
<body>
<div class="pc">
<img src="./assets/正方形.jpg" alt="" style="width: 100%; height: 100%;">
</div>
</body>
</html>
css部分
.pc{
margin: 200px;
width: 400px;
height: 400px;
background-color: orange;
background-size: cover;
overflow: hidden;
}
.pc>img{
transform: rotate(45deg); /* 假设这里的图片需要旋转45度 , 那么我们如何保证旋转的同时放大能够刚好填满背后的div呢 */
}
问题效果图如下
正方形.png
数学计算解决问题
经过如下勾股定理计算
正方形计算.jpg
在旋转的同时需要同时放大 1.42 倍
所以 , 修改css代码如下
.pc{
margin: 200px;
width: 400px;
height: 400px;
background-color: orange;
background-size: cover;
overflow: hidden;
}
.pc>img{
transform: rotate(45deg) scale(1.42);
}
得到我们的想要的效果图
正方形效果图.png
网友评论