Question

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.

Answer 1

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.