保持iframe比例且响应式，充分利用屏幕宽度的CSS方案咨询

在网页中嵌入4个直播流iframe，通过flexbox的flex-direction: row横向排列。要求页面具备响应式特性，iframe需保持特定宽高比，同时充分利用客户端屏幕的全部宽度。额外说明：拍摄直播流的摄像头物理倾斜90度，因此iframe需反向旋转90度。需要针对CSS实现提供优化建议。

HTML - 首页React组件 #

import React from 'react'
import HomeCSS from './Home.module.css';

function Home() {
  return (
    <div className={HomeCSS.pageWrapper}>
      <div className={HomeCSS.upperbox}>

        <div className={HomeCSS.iframeWrapper}>
          <iframe className={HomeCSS.myiframe} src='https//foo.bar'></iframe>
        </div>

        <div className={HomeCSS.iframeWrapper}>
          <iframe className={HomeCSS.myiframe} src='https//foo.bar'></iframe>
        </div>

        <div className={HomeCSS.iframeWrapper}>
          <iframe className={HomeCSS.myiframe} src='https//foo.bar'></iframe>
        </div>

        <div className={HomeCSS.iframeWrapper}>
          <iframe className={HomeCSS.myiframe} src='https//foo.bar'></iframe>
        </div>

      </div>
      <div className={HomeCSS.lowerWrapper}>
        <div className={HomeCSS.lowerbox}>
          Fisheye
        </div>
      </div>
    </div>
  )
}

export default Home

现有CSS代码 #

.pageWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: blanchedalmond;
}

.upperbox {
    padding-top: .3%;
    padding-bottom: .3%;
    display: flex;
    flex-direction: row;
    gap: 3px;
    justify-content: space-around;
    height: fit-content;
}

.lowerWrapper {
    padding: .5%;
}

.lowerbox {
    border: 3px solid black;
    border-radius: 5px;
    height: fit-content;
    text-align: center;
    font-size: 70px;
}

.iframeWrapper {
    border: 3px solid black;
    border-radius: 5px;
    min-height: 500px;
    min-width:300px;
    overflow: hidden;
    position: relative;
}

.myiframe {
    border-style: none;
    pointer-events: none;
    width: 185%;
    height: 150%;
    rotate: 90deg;
    position: absolute;
    left: -43%;
    top: -28%;
}

已尝试方案 #

曾尝试让iframe容器拉伸以适配屏幕宽度，再调整高度维持正确比例。目前硬编码height:500px和width:300px的比例，配合iframe缩放偏移显示效果尚可，但窗口扩大时，iframe无法随屏幕尺寸调整宽度，无法最大化利用窗口宽度。

效果对比 #

• 预期效果：iframe最大化利用窗口宽度，保持指定宽高比，响应式适配不同屏幕
• 当前效果：窗口扩大时，iframe仅维持固定比例，不随屏幕宽度调整

以下是调整后的CSS代码，解决响应式适配和宽高比问题：

.pageWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: blanchedalmond;
    /* 确保页面占满视口高度 */
    min-height: 100vh;
    margin: 0;
}

.upperbox {
    padding: 0.3% 0;
    display: flex;
    flex-direction: row;
    gap: 3px;
    /* 让容器占满可用宽度 */
    flex: 1;
}

.lowerWrapper {
    padding: 0.5%;
}

.lowerbox {
    border: 3px solid black;
    border-radius: 5px;
    height: fit-content;
    text-align: center;
    font-size: 70px;
}

.iframeWrapper {
    border: 3px solid black;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    /* 用padding-top实现3:5的固定宽高比（500/300*100% ≈ 166.67%） */
    padding-top: 166.67%;
    /* 平分父容器宽度，允许缩小到最小范围 */
    flex: 1;
    min-width: 0;
}

.myiframe {
    border-style: none;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    /* 反向旋转90度修正摄像头倾斜 */
    rotate: -90deg;
    /* 设置旋转原点并调整位置，让内容完整填充容器 */
    transform-origin: top left;
    top: 100%;
    left: 0;
    /* 确保旋转后内容覆盖容器 */
    width: 100vh;
    height: 100vw;
}

关键优化点说明 #

1. 响应式宽度适配：给.upperbox设flex:1占满父容器宽度，每个.iframeWrapper设flex:1实现平分宽度，min-width:0解决flex子项宽度溢出问题。
2. 固定宽高比实现：通过padding-top: 166.67%实现3:5的宽高比，容器高度会随宽度按比例自动调整，替代硬编码的固定尺寸。
3. 旋转与定位修正：将iframe旋转方向改为rotate: -90deg匹配摄像头倾斜，通过transform-origin和位置偏移，让旋转后的内容完整居中填充容器，避免偏移或裁剪。
4. 视口适配：给.pageWrapper加min-height:100vh，确保页面占满整个视口高度，避免内容截断。

内容的提问来源于stack exchange，提问作者David Kristensen