Как корректно повернуть картинку средствами CSS?

Question

Работаю в Drupal и CKeditor, OCUpload.

Некоторые фотоаппараты (и, кстати, Айфоны) при съемке вертикально ориентированных снимков делают все равно горизонтальные, но в файле выставляют отметку поворота камеры.

А некоторые программы (например, CMS Drupal) не разбираются в этом. Работающие в CKeditor'е юзеры грузят картинки в свои посты и с удивлением обнаруживают их повернутыми боком. Хотелось бы сделать им удобный инструмент для поворачивания изображений. И лучше бы это сделать просто CSS'ом.

Вот, скажем, есть у меня html:

<body>
    Строки <br />
    до изображения

      <img src="path/to/image.jpg">

    Строки <br />
    после изображения
</body>

и CSS:

img {width:100%;}

Картинка — горизонтальная, но снимали ее вертикально, поэтому она повернута боком.

Я пытаюсь добавить картинке CSS (в будущем это будет плагин к CKeditor'у, поворачивающий картинки):

transform: rotate(90deg) translateY(-100%);
transform-origin: top left;

Картинка поворачивается, но, естественно, не становится на всю ширину, а по вертикали начинает перекрывать следующие за ней строки и элементы вёрстки. Нужно подгонять ей height (который теперь как width) и, видимо, выставлять margin'ы для компенсации новых размеров. Наверняка, там придется считать CSS calc'ом или даже JS'ом.

Может, кто-то сталкивался уже? Может, есть стандартная методика, только я один о ней не знаю?

БЛОГ НА HUSL

Как корректно повернуть картинку средствами CSS?

Ответы (0 шт):