用CSS旋转图像 [英] rotate image with css

问题描述

我只想使用CSS将图像旋转90度.我可以旋转，但是图像的位置不是应该的.首先，它将覆盖同一div中的其他一些元素，其次，其垂直尺寸将变得大于包含div的垂直尺寸.这是定义两个类的代码.

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

推荐答案

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

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屋！