Повернуть изображение с помощью css

Я хотел бы повернуть изображение на 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;
}

Есть ли способ сохранить изображение внутри раздела? Я могу перевести и масштабировать изображение так, чтобы оно находилось в этом разделе, но это работает только, если я заранее знаю размер изображения. Я хотел бы иметь надежный метод, который не зависит от размера.

Ответы

Ответ 1

Дайте родительскому стилю overflow: hidden. Если это перекрывающиеся элементы-братья, вам придется помещать их в контейнер с фиксированной высотой/шириной и присваивать стиль overflow: hidden.

Ответ 2

Проблема выглядит как изображение не квадратное, и браузер настраивается как таковой. После вращения убедитесь, что размеры сохраняются путем изменения поля изображения.

.imagetest img {
  transform: rotate(270deg);
  ...
  margin: 10px 0px;
}

Сумма будет зависеть от разницы в высоте x ширины изображения. Вам также может потребоваться добавить display:inline-block; или display:block, чтобы распознать параметр поля.

Ответ 3

Я знаю, что эта тема старая, но правильных ответов нет.

Поворот преобразования вращает элемент от его центра, поэтому более широкий элемент будет вращаться следующим образом:

Применение overflow: hidden скрывает самое длинное измерение, как вы можете видеть здесь:

img{
  border: 1px solid #000;
  transform:          rotate(270deg);
  -ms-transform:      rotate(270deg);
  -moz-transform:     rotate(270deg);
  -webkit-transform:  rotate(270deg);
  -o-transform:       rotate(270deg);
}
.imagetest{
  overflow: hidden
}

<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" width=100%/>
</div>
</section>
</article>