I'm created a simple flexbox layout of a header, image and a footer. Header and footer are just one line of text, while the image takes the as much space as possible, centered. I need to rotate the image, while keeping the layout like this. Is it possible in pure CSS?
Here are some images.
Image before rotation, correct layout:
Image after rotation, incorrectly sized:
How it should look like after rotation:
I understand why it the image is too small after rotation - it uses the box before rotation and just applies rotation on it. Is it possible to somehow use the image box calculation after transforming it? Or is there any other CSS way to achieve this effect reliably?
Here's the snippet:
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #222;
color: #fff;
font-family: sans-serif;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.top,
.bottom {
background-color: #444;
flex-shrink: 0;
padding: 1em;
}
.image {
flex-grow: 1;
object-fit: scale-down;
min-height: 0;
object-fit: scale-down;
object-position: center center;
rotate: 270deg;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate</title>
</head>
<body>
<section class="container">
<header class="top">Top</header>
<img src="https://i.ibb.co/sPTMbpF/panorama.jpg" class="image">
<footer class="bottom">Bottom</footer>
</div>
</body>
</html>