如何仅使用 CSS 旋转图像? [英] How to rotate image with CSS only?

问题描述

我想仅使用 CSS 将图像旋转 90 度.

我可以旋转，但是图像的位置不是它应该的位置.首先，它会覆盖同一个

中的一些其他元素.其次，它的垂直维度将变得比包含的

更大.

这是我定义两个类的代码:

.imagetest img {变换:旋转(270度)；-ms-transform:旋转(270度)；-moz 变换:旋转(270 度)；-webkit-transform:旋转(270度)；-o-变换:旋转(270度)；宽度:100%；}.照片 {宽度:95%；填充:0 15px；边距:0 0 10px 0；向左飘浮;背景:#828DAD；}

<section class="照片"><div>标题</div><div class="imagetest"><img src="https://picsum.photos/200/100"/>

</节></article>

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

解决方案

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

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>. Second, its vertical dimension will become bigger than the containing <div>.

Here is my code where the two classes are defined:

.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.

解决方案

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.

这篇关于如何仅使用 CSS 旋转图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！