用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

给父母一个overflow: hidden风格。如果它是重叠的兄弟元素，你将不得不把它放在一个固定高度/宽度的容器内，并给它一个overflow: hidden样式。

Answer 2

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

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

该量将取决于图像的高度x宽度的差异。您可能还需要添加display:inline-block;或display:block以使其识别margin参数。

Answer 3

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

旋转变换将元素从其中心旋转，因此，更宽的元素将以这种方式旋转：

应用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>

我希望它对某人有所帮助！