如何制作内置图片且保持固定比例的响应式矩形网格？

解决方案 #

你需要修改布局逻辑和图片容器的比例控制规则，具体改动如下：

1. 修正网格容器样式

原来的列布局规则错写在了.grid的伪元素上，直接给网格容器配置CSS Grid即可更稳定地控制响应式布局：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 按你的需求设置列数，这里对应你原来的4列配置 */
  gap: 0; /* 可自行调整网格项间距 */
}

2. 调整网格项基础样式

.element-item {
  position: relative;
  border: 1px solid black;
  width: 100%;
  height: auto;
  margin-left: -1px;
  margin-top: -1px;
  padding: 10px;
  background: white;
  box-sizing: border-box; /* 避免padding、边框撑宽容器导致布局错位 */
}

3. 给图片外层容器设置固定宽高比

不要给图片写固定高度，给外层.switch容器绑定固定比例，页面缩放时比例会自动保持一致：

.switch {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3/4; /* 此处替换为你右上角图片的实际宽高比即可，比如正方形填1/1，横版图填4/3 */
  overflow: hidden;
}

如果需要兼容不支持aspect-ratio的旧浏览器，可以用padding方案替代：

.switch {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: 133%; /* 3:4比例对应值为4/3*100%=133%，按需换算你需要的比例即可 */
  overflow: hidden;
}

4. 调整图片样式，适配容器尺寸

.element-item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保留你需要的裁切效果，图片不变形铺满容器 */
}

5. 微调hover显示规则

把.img-top的显示属性改成block更适配块级容器：

.switch:hover .img-top {
  display: block;
}

改动后所有网格的图片都会保持统一比例，页面缩放时不会变形，符合你允许裁切的需求。

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