如何用CSS让响应式picture frame自适应浏览器窗口并完整显示

核心思路是动态计算相框的最大显示尺寸，同时保留其原始宽高比，确保整个相框完全在浏览器视口内显示，且mat四边的比例保持一致。

1. 调整基础样式 #

修改CSS，添加视口适配的基础布局，避免页面滚动并实现居中：

/* 重置默认边距，确保视口计算准确 */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.frame-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让相框居中显示 */
  max-width: 100vw;
  max-height: 100vh;
}

.frame {
  position: relative;
  width: 100%;
  background: black;
  box-shadow: 0 10px 7px -5px rgba(0, 0, 0, 0.3);
}

.mat {
  position: absolute;
  background: white;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) inset;
}

.art {
  position: absolute;
}

.art img {
  width: 100%;
  display: block; /* 消除图片底部默认间隙 */
}

.art:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) inset;
}

2. 更新HTML结构 #

将相框放入容器中，同时把原始宽高比存入自定义属性，方便JS读取：

<div class="frame-container">
  <div class="frame" data-aspect-ratio="115.09%">
    <div class="mat" style="top: 2.1721%; bottom: 2.1721%; left: 2.50%; right: 2.50%;">
      <div class="art" style="top: 11.354%; bottom: 11.354%; left: 13.158%; right: 13.158%;">
        <img src="https://cw109eu.uk/images/portfolios/recent/231106-44511-1.jpg" />
      </div>
    </div>
  </div>
</div>

3. 动态计算适配尺寸 #

通过JS对比相框与视口的宽高比，动态调整相框大小，确保完整显示：

function fitFrameToViewport() {
  const frameContainer = document.querySelector('.frame-container');
  const frame = document.querySelector('.frame');
  // 转换原始比例为小数格式
  const frameAspectRatio = parseFloat(frame.dataset.aspectRatio) / 100;

  // 获取当前视口的宽高
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  const viewportAspectRatio = viewportWidth / viewportHeight;

  let frameWidth, frameHeight;

  // 判断以视口宽度还是高度为基准缩放
  if (frameAspectRatio > viewportAspectRatio) {
    // 相框更竖，以视口高度为基准计算
    frameHeight = viewportHeight;
    frameWidth = frameHeight / frameAspectRatio;
  } else {
    // 相框更横，以视口宽度为基准计算
    frameWidth = viewportWidth;
    frameHeight = frameWidth * frameAspectRatio;
  }

  // 设置容器尺寸，确保相框不超出视口
  frameContainer.style.width = `${frameWidth}px`;
  frameContainer.style.height = `${frameHeight}px`;
  // 保留相框原始比例，保证内部元素布局正确
  frame.style.paddingBottom = `${frameAspectRatio * 100}%`;
}

// 页面加载时初始化适配
fitFrameToViewport();
// 窗口大小变化时重新计算
window.addEventListener('resize', fitFrameToViewport);

关键说明 #

• 用frame-container实现相框的居中定位，同时限制其最大尺寸不超过视口
• 通过对比相框与视口的宽高比，自动选择缩放基准，确保整个相框完全显示在视口内
• 保留了mat和art的百分比定位规则，确保无论缩放比例如何，四边的尺寸比例始终一致
• 监听窗口resize事件，保证窗口大小变化时相框自动重新适配

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