用css旋转图像

Question

我想用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>

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

Answer 1

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

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

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

Answer 2

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

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

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

所以，我所做的是一些计算，在我的例子中，图片宽度为 455 像素，高度为 111 像素，我们必须根据这些尺寸添加一些边距：

• 左边距：（宽 - 高）/2
• 上边距：（高度 - 宽度）/2

在 CSS 中：

margin: calc((455px - 111px)/2) calc((111px - 455px)/2);

结果：

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);
}

我希望它可以帮助某人！

Answer 3

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