1

The image is in portrait mode, i.e. higher than wide. I would like to display the image in the browser window in landscape, i.e rotated by 90 degree and it shall then have 80% width. What does not work is

.rotimg {
  transform: rotate(90deg);
  width: 80%;
 }

It looks like the image is first scaled to 80% width and then rotated. In particular the height of the block is kept at the original portrait height and the image is "too wide".

Is there some way to get around this with pure CSS, i.e. let the browser first rotate and then apply width and compute the block height?

Harald
  • 4,575
  • 5
  • 33
  • 72
  • 1
    I really think there's only javascript solutions for this one. – Mark Jul 29 '17 at 16:40
  • Searching again for this problem, I found actually a question that is basically a duplicate and has a nice answer: https://stackoverflow.com/a/16302202/2954288 – Harald Jul 30 '17 at 10:08

0 Answers0