如何实现保持固定宽高比的响应式缩略图网格布局？

实现方案 #

以下代码可完全满足你要的固定宽高比、自适应缩放、铺满父容器的需求：

完整CSS代码

/* 全局盒模型重置，避免宽高计算出现偏差 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  display: grid;
  /* 自动适配列数：每列最小宽度120px可按需调整，剩余宽度自动平均分配给所有列 */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  /* 统一控制行列间距，可按需调整数值 */
  gap: 10px;
  padding: 10px 5px;
}

.entry {
  /* 固定180:300的宽高比，宽度变化时高度自动等比缩放 */
  aspect-ratio: 180 / 300;
  background: red;
}

HTML代码无需改动

<div class="container">
  <div class="entry" id="1"></div>
  <div class="entry" id="2"></div>
  <div class="entry" id="3"></div>
  <div class="entry" id="4"></div>
  <div class="entry" id="5"></div>
  <div class="entry" id="6"></div>
  <div class="entry" id="7"></div>
  <div class="entry" id="8"></div>
  <div class="entry" id="9"></div>
  <div class="entry" id="10"></div>
</div>

实现说明 #

你要找的宽高比固定适配技术是CSS的aspect-ratio属性，它可以直接指定元素的宽高比例，元素尺寸变化时会自动按比例换算另一边的数值，不需要手动计算。
如果需要兼容不支持aspect-ratio的旧版浏览器，可以用传统padding百分比方案替换.entry的样式：

.entry {
  position: relative;
  height: 0;
  /* 300/180*100% = 166.666%，对应180:300的宽高比 */
  padding-top: 166.666%;
  background: red;
}
/* 如果entry内有内容，需要新增内层容器做绝对定位 */
.entry .inner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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