How to rotate image with CSS only

Question

With CSS alone, I want to rotate an image by 90 degrees.

Although I may rotate the image, the position is not what it should be. It will first override a few other elements in the same div>. Second, it will grow vertically to be larger than the contained div>.

Here is my code, which defines the two classes:

.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 it possible to maintain the image inside the section? I can scale and translate the image to fit it within the section, but that only works if I am aware of the image's dimensions beforehand. A trustworthy approach that is independent of size is something I'd want to have.