用css旋转图像

Question

我想仅使用CSS将图像旋转90度。我可以进行旋转，但是图像的位置不是应该的。首先，它将覆盖同一div中的一些其他元素，其次，其垂直维度将变得大于包含div。这是我的代码

<article>
<section class="photo">
<div>Title</div>
<div class="imagetest">
<img src="DSC01688.JPG" width=100%/>
</div>
</section>
</article>

这两个类定义为

.imagetest img {
transform:          rotate(270deg);
-ms-transform:      rotate(270deg);
-moz-transform:     rotate(270deg);
-webkit-transform:  rotate(270deg);
-o-transform:       rotate(270deg);
}
.photo {
 width: 95%;
 padding: 0 15px;
 margin: 0 0 10px 0;
 float: left;
 background: #828DAD;
}

有没有办法将图像保留在该部分内？我可以翻译和缩放图像，使其在部分内，但只有在我事先知道图像大小的情况下才有效。我想有一个不依赖于尺寸的可靠方法。

Answer 1

问题看起来图像不是正方形，浏览器会这样调整。 旋转后，请确保通过更改图像边距来保留尺寸。

.imagetest img {
  transform: rotate(270deg);
  ...
  margin: 10px 0px;
}

数量取决于图像高度x宽度的差异。 您可能还需要添加display:inline-block;或display:block才能识别边距参数。

Answer 2

为父级提供overflow: hidden的样式。如果它是重叠的兄弟元素，则必须将其放在具有固定高度/宽度的容器内，并赋予样式overflow: hidden。

Answer 3

我知道这个话题很老，但是没有正确的答案。

rotation transform从元素的中心旋转元素，因此，较宽的元素将以这种方式旋转：

应用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，我们必须根据这些尺寸添加一些边距：

• 左边距：（宽度-高度）/ 2
• 上边距：（高度-宽度）/ 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>

我希望它可以帮助某人！

Answer 4

使用transform: rotate(xdeg)进行旋转，并将overflow: hidden应用于父组件以避免重叠效果

.div-parent {
   overflow: hidden
}

.div-child {
   transform: rotate(270deg);
}