如何实现HTML固定高度的全屏宽度图片马赛克？

核心需求 #

• 图片马赛克始终全屏宽度展示
• 马赛克高度固定为屏幕高度的70%，剩余30%留给标题区域，不受浏览器尺寸变化影响

补充说明 #

• 已知固定全屏宽度会带来适配问题，可接受部分图片被裁切/隐藏
• 无需统一图片尺寸比例，只要达到固定高度的马赛克视觉效果即可

之前的尝试（效果不佳） #

曾按行组织马赛克，用JS根据屏幕尺寸隐藏底部行，但无法覆盖所有视图组合：

document.addEventListener('DOMContentLoaded', function() {
    function adjustContainerVisibility() {
        var disposableContainer1 = document.getElementById('mosaic-row-4'); // Replace with actual ID
        var disposableContainer2 = document.getElementById('mosaic-row-3'); // Replace with actual ID

        var windowHeight = window.innerHeight;
        var windowWidth = window.innerWidth;

        var thresholdForContainer1, thresholdForContainer2;

        if (windowWidth > 900) {
            // Width greater than 900px
            thresholdForContainer1 = 760;
            thresholdForContainer2 = 740;
        } else if (windowWidth > 800) {
            // Width between 801px and 900px
            thresholdForContainer1 = 750;
            thresholdForContainer2 = 730;
        } else {
            // Width 800px or less
            thresholdForContainer1 = 730;
            thresholdForContainer2 = 650;
        }

        // Debugging logs
        console.log('Window Height:', windowHeight, 'Window Width:', windowWidth);
        console.log('Thresholds:', thresholdForContainer1, thresholdForContainer2);

        // Check and apply visibility for disposableContainer1
        if (windowHeight < thresholdForContainer1) {
            if (disposableContainer1) disposableContainer1.style.display = 'none';
        } else {
            if (disposableContainer1) disposableContainer1.style.display = ''; // Reset to default
        }

        // Check and apply visibility for disposableContainer2
        if (windowHeight < thresholdForContainer2) {
            if (disposableContainer2) disposableContainer2.style.display = 'none';
        } else {
            if (disposableContainer2) disposableContainer2.style.display = ''; // Reset to default
        }
    }

    // Run on page load
    adjustContainerVisibility();

    // Add event listener for window resizing
    window.addEventListener('resize', adjustContainerVisibility);
});

自己的思路（不确定可行性） #

1. 创建尺寸足够大的马赛克，仅显示适配70%屏幕高度的部分，超出区域隐藏
2. 使用 Masonry 或 Grid 布局，让图片自动填充可用空间

高效实现方案（针对前端新手） #

方案1：CSS裁剪方案（思路1落地，最简单） #

直接用CSS固定容器尺寸，超出部分隐藏，图片自动填充，完全无需JS：

<!-- HTML结构 -->
<div class="mosaic-container">
  <img src="img1.jpg" alt="" class="mosaic-img">
  <img src="img2.jpg" alt="" class="mosaic-img">
  <!-- 补充剩余图片 -->
</div>
<div class="title-area">
  <!-- 标题内容 -->
</div>

/* CSS样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.mosaic-container {
  width: 100vw; /* 全屏宽度 */
  height: 70vh; /* 固定为屏幕高度70% */
  overflow: hidden; /* 超出部分隐藏 */
  display: flex;
  flex-wrap: wrap; /* 图片自动换行 */
  gap: 2px; /* 图片间间距，可调整 */
  padding: 2px;
}

.mosaic-img {
  flex: 1 1 auto; /* 自动填充剩余空间 */
  min-width: 100px; /* 控制图片最小宽度，避免过窄 */
  height: auto;
  object-fit: cover; /* 裁剪图片填充容器，避免变形 */
}

.title-area {
  height: 30vh; /* 剩余30%高度 */
  width: 100vw;
  /* 标题区域基础样式，可自定义 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

该方案靠原生CSS适配所有屏幕，图片自动填满容器，超出70vh的部分直接隐藏，完全满足需求。

方案2：CSS Grid布局（更规整的排列） #

如果想要更可控的网格效果，用Grid布局同样无需JS：

.mosaic-container {
  width: 100vw;
  height: 70vh;
  overflow: hidden;
  display: grid;
  /* 自动生成列，最小宽度150px，最大占满剩余空间 */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: auto;
  gap: 2px;
  padding: 2px;
}

.mosaic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这种方式会生成规整的网格，图片填满每个网格单元，超出容器高度的部分被隐藏，适配所有设备。

为什么放弃之前的JS方案？ #

手动设置屏幕尺寸阈值的维护成本极高，永远覆盖不完所有设备尺寸，CSS方案是原生适配，更稳定高效，无需额外JS逻辑。

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