Поворот и масштабирование изображения, чтобы оно «поместилось» в контейнере div ⇐ CSS

[Anonymous]

I'm using transform to rotate an image according to its EXIF data. Then, I'd like to display it "full screen" by fitting it to its parent div.

The problem is, max-width / max-height and all other sizing directives "ignore" the rotation (which is normal, according to transform specs, the element's transformation is "ignored" in the flow.

Jsfiddle: http://jsfiddle.net/puddjm4y/2/

div.top { position: fixed; width: 100%; height: 100%; border: 1px solid blue; } img { transform: rotate(90deg); max-width: 100%; max-height: 100%; }



Is there a way to achieve this?


Источник: https://stackoverflow.com/questions/324 ... tainer-div