поворот изображения с помощью 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;
}

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

10
css image position rotation translate-animation

2 ответов

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

8

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

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

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

16