Я хотел бы повернуть изображение на 90 градусов только с помощью CSS. Я могу сделать поворот, но тогда положение изображения не то, что должно быть. Во-первых, он будет перекрывать некоторые другие элементы в одном и том же div, а во-вторых, его вертикальное измерение станет больше, чем содержащий div. Вот мой код
<article>
<section class="photo">
<div>Title</div>
<div class="imagetest">
<img src="DSC01688.JPG" width=100%/>
</div>
</section>
</article>
где два класса определяются как
.imagetest img {
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
.photo {
width: 95%;
padding: 0 15px;
margin: 0 0 10px 0;
float: left;
background: #828DAD;
}
Есть ли способ сохранить изображение внутри раздела? Я могу перевести и масштабировать изображение так, чтобы оно находилось в этом разделе, но это работает только, если я заранее знаю размер изображения. Я хотел бы иметь надежный метод, который не зависит от размера.