CSS 用css旋转图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13674086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
rotate image with css
提问by v923z
I would like to rotate an image by 90 degrees with CSS only. I can do the rotation, but then the position of the image is not what it should be. First, it will overlay some other elements in the same div, and second, its vertical dimension will become bigger than the containing div. Here is my code where the two classes are defined.
我想仅使用 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>Is there a way of keeping the image within the section? I can translate and scale the image so that it is within the section, but that works only, if I know the image size beforehand. I would like to have a reliable method that does not depend on the size.
有没有办法将图像保留在该部分内？我可以翻译和缩放图像，使其位于该部分内，但只有在我事先知道图像大小的情况下才有效。我想要一种不依赖于大小的可靠方法。
采纳答案by HellaMad
Give the parent a style of overflow: hidden. If it is overlapping sibling elements, you will have to put it inside of a container with a fixed height/width and give that a style of overflow: hidden.
给父母一个overflow: hidden. 如果它与同级元素重叠，则必须将其放在具有固定高度/宽度的容器内，并赋予overflow: hidden.
回答by James Bone
The trouble looks like the image isn't square and the browser adjusts as such. After rotation ensure the dimensions are retained by changing the image margin.
问题看起来像图像不是方形的，浏览器也会这样调整。旋转后通过更改图像边距确保保留尺寸。
.imagetest img {
transform: rotate(270deg);
...
margin: 10px 0px;
}
The amount will depend on the difference in height x width of the image.
You may also need to add display:inline-block;or display:blockto get it to recognize the margin parameter.
数量将取决于图像的高度 x 宽度的差异。您可能还需要添加display:inline-block;或display:block让它识别边距参数。
回答by stramin
I know this topic is old, but there are no correct answers.
我知道这个话题很老，但没有正确的答案。
rotation transform rotates the element from its center, so, a wider element will rotate this way:
旋转变换从其中心旋转元素，因此，更宽的元素将以这种方式旋转：
Applying overflow: hiddenhides the longest dimension as you can see here:
应用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>So, what I do is some calculations, in my example the picture is 455px width and 111px height and we have to add some margins based on these dimensions:
所以，我所做的是一些计算，在我的例子中，图片宽度为 455 像素，高度为 111 像素，我们必须根据这些尺寸添加一些边距：
- left margin: (width - height)/2
- top margin: (height - width)/2
- 左边距：（宽 - 高）/2
- 上边距：（高度 - 宽度）/2
in CSS:
在 CSS 中：
margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
Result:
结果：
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>I hope it helps someone!
我希望它可以帮助某人！
