如何防止HTML元素在浏览器缩放时发生变形？

问题背景 #

网站UI在浏览器75%缩放比例下显示正常，但放大后元素（如<div>）会扭曲拉伸，原本的方形变成矩形。已尝试给元素设置固定宽高，但无效，页面使用Bootstrap框架。

需求 #

页面缩放时仅做视图放大，元素保持原始大小和形状，完全避免扭曲变形。

效果对比 #

• 预期效果：<div>保持方形（75%缩放时状态）
• 不良效果：放大后<div>扭曲变形

相关代码 #

HTML代码 #

<div class="col-3">
              
    <div class="wrapper-vids">
        <div class="stranger-peer-vid">
            <video class="video-s" id="videoS" autoplay></video>
        </div>
        <div class="local-peer-vid">
            <video class="video-l" id="videoL" autoplay></video>
        </div>
    </div>
              
</div>

CSS代码 #

.wrapper-vids {
    margin:11px;
    contain: content;
}

video {
    transform: scaleX(-1);         /* 镜像效果 */
    -webkit-transform: scaleX(-1); /* 镜像效果 */
}
.stranger-peer-vid {
    height: 350px;
    width:480px;
    background: black;
}
.local-peer-vid {
    height: 350px;
    width:480px; 
    background: black;
    margin-top: 5px;
    
}
.video-l {
    height: 350px;
    width:480px;
    left: 0;
    bottom: 0;
}
.video-s {
    height: 350px;
    width:480px;
}

解决方案 #

1. 解除Bootstrap网格的流式挤压 #

你使用的col-3是百分比宽度的Flex容器，会随浏览器窗口缩放挤压内部元素。可以：

• 替换col-3为自定义固定容器：

<div class="fixed-video-container">
    <!-- 原wrapper-vids内容 -->
</div>

.fixed-video-container {
    width: 480px; /* 匹配视频容器宽度 */
    flex-shrink: 0; /* 防止Flex布局下被压缩 */
    margin: 0 auto; /* 可选：居中容器 */
}

• 或者修改现有col-3的属性，强制固定宽度：

.col-3 {
    flex-shrink: 0;
    width: 480px !important; /* 覆盖Bootstrap的百分比宽度 */
}

2. 用宽高比锁定元素形状 #

固定宽高失效的原因是父容器布局或浏览器缩放时的像素对齐问题，用aspect-ratio强制保持比例：

.stranger-peer-vid, .local-peer-vid {
    width: 480px;
    aspect-ratio: 480 / 350; /* 严格锁定宽高比 */
    background: black;
}
.video-s, .video-l {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 视频内容保持比例，避免拉伸变形 */
}

3. 优化视口设置（可选） #

如果需要禁止浏览器缩放时的页面流式调整，在HTML头部添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

若要完全禁止用户缩放，可添加user-scalable=no，但不推荐影响用户体验。

4. 修复容器的contain属性影响 #

.wrapper-vids的contain: content可能限制了内部元素的尺寸计算，可尝试移除或调整：

.wrapper-vids {
    margin:11px;
    /* contain: content; 移除或改为 contain: layout; */
}

内容的提问来源于stack exchange，提问作者goth gamer gal