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.