旋转图片但保留Flexbox布局的纯CSS实现方案问询

问题描述 #

我搭建了一个由header、图片和footer组成的简单Flexbox布局：header和footer为单行文本，图片需尽可能占满剩余空间并居中。我需要旋转图片的同时维持该布局，能否用纯CSS实现？

我理解旋转后图片尺寸过小的原因是CSS基于旋转前的盒模型计算尺寸，仅对其应用旋转效果。能否基于旋转后的盒模型计算尺寸，或采用其他可靠的CSS方法实现预期效果？

附上布局代码及效果对比图：旋转前的正确布局、旋转后的错误尺寸、预期的旋转后布局。

原代码片段 #

CSS

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;
}

HTML

<!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>
        </section>
    </body>
</html>

解决方案 #

可以通过容器包裹图片的方式实现，核心思路是让容器适配旋转后的尺寸需求，再对容器进行旋转，图片在容器内填充空间。具体修改如下：

修改后的代码 #

HTML（新增图片容器）

<!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>
            <div class="image-container">
                <img src="https://i.ibb.co/sPTMbpF/panorama.jpg" class="image">
            </div>
            <footer class="bottom">Bottom</footer>
        </section>
    </body>
</html>

CSS（调整容器和图片样式）

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-container {
    flex-grow: 1;
    min-height: 0;
    /* 让容器在剩余空间中居中并适配尺寸 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 对容器进行旋转 */
    rotate: 270deg;
    /* 设置旋转后的宽高比，根据原图比例调整：比如原图是16:9，旋转后变为9:16 */
    aspect-ratio: 9/16;
    margin: auto;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center;
}

原理说明 #

• CSS的rotate属性不会改变元素的盒模型尺寸，直接旋转图片会导致其可用空间仍基于原宽高，因此显示过小。
• 新增容器后，通过aspect-ratio定义旋转后的预期宽高比，让容器能在Flex布局的剩余空间中占据合适尺寸。
• 容器使用Flex布局居中图片，图片通过object-fit: scale-down保证完整显示且适配容器空间。

内容的提问来源于stack exchange，提问作者Robo Robok