32

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

4 回答 4

30

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

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

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

于 2014-11-05T00:42:45.533 回答
12

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

于 2012-12-02T21:34:20.407 回答
12

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

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

在此处输入图像描述

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>

我希望它可以帮助某人！

于 2019-01-29T15:54:58.420 回答
1

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

.div-parent {
   overflow: hidden
}

.div-child {
   transform: rotate(270deg);
}
于 2020-09-15T07:13:41.363 回答