如何仅使用CSS旋转图像？
如何仅使用CSS旋转图像？
提问于 2012-12-03 05:31:56
我想旋转一个CSS的图像只有90度。
我可以做旋转，但是图像的位置不是它应该的位置。首先，它将覆盖相同<div>中的一些其他元素。其次，它的垂直维度将变得比包含的<div>更大。
下面是定义这两个类的代码：
.imagetest img {
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
width: 100%;
}
.photo {
width: 95%;
padding: 0 15px;
margin: 0 0 10px 0;
float: left;
background: #828DAD;
}<article>
<section class="photo">
<div>Title</div>
<div class="imagetest">
<img src="https://picsum.photos/200/100"/>
</div>
</section>
</article>
有没有一种方法可以将图像保留在部分中？我可以平移和缩放图像，使其在该部分内，但这只有在我事先知道图像大小的情况下才有效。我希望有一个可靠的方法，不依赖于大小。
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-12-03 05:34:20
为父级提供overflow: hidden样式。如果它是重叠的兄弟元素，则必须将其放入具有固定高度/宽度的容器中，并为其赋予overflow: hidden样式。
Stack Overflow用户
发布于 2014-11-05 08:42:46
问题是图像看起来不是正方形的，浏览器也会进行相应的调整。旋转后，通过更改图像边距来确保尺寸保持不变。
.imagetest img {
transform: rotate(270deg);
...
margin: 10px 0px;
}数量将取决于图像的高度x宽度的差异。您可能还需要添加display:inline-block;或display:block以使其识别边距参数。
Stack Overflow用户
发布于 2019-01-29 23:54:58
我知道这个话题很老了，但是没有正确的答案。
旋转变换将元素从其中心旋转，因此，较宽的元素将以这种方式旋转：
应用overflow: hidden会隐藏最长的尺寸，如下所示：
img{
border: 1px solid #000;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
.imagetest{
overflow: hidden
}<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" width=100%/>
</div>
</section>
</article>
所以，我所做的是一些计算，在我的例子中，图片的宽度是455px，高度是111px，我们必须根据这些尺寸添加一些页边距：
左边距：(-height)/2
- 上边距：(height - width)/2
在CSS中：
margin: calc((455px - 111px)/2) calc((111px - 455px)/2);结果：
img{
border: 1px solid #000;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
/* 455 * 111 */
margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
}<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" />
</div>
</section>
</article>
我希望它能帮助一些人！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13674086
复制相关文章
相似问题
腾讯云开发者
