求助：使用HTML和CSS实现固定尺寸图片网格

嘿，我看你遇到了图片网格尺寸随图片大小变化的困扰，这在做商品类网格时特别常见，咱们来一步步搞定它！

问题根源 #

你当前的代码里，图片设置了width:100%; height:auto;，这会让图片按照自身原始比例缩放，导致每个.product-image的高度跟着图片走，最终整个网格的卡片大小参差不齐。要实现固定尺寸的网格，核心是让图片容器保持固定尺寸/比例，图片自适应填充容器，而不是反过来让容器适应图片。

解决方案 #

我修改了你的CSS代码，重点给图片容器添加固定比例约束，同时让图片自适应填充：

.product-grid {
    font-family: Raleway,sans-serif;
    text-align: center;
    padding: 0 0 72px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.product-grid .product-image {
    position: relative;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    /* 关键：用padding-top实现响应式固定宽高比，100%对应正方形容器 */
    /* 若需其他比例可调整，比如3:2设为66.67%，4:3设为75% */
    padding-top: 100%;
    overflow: hidden;
}

.product-grid .product-image a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.product-grid .product-image img {
    width: 100%;
    height: 100%;
    /* 保证图片按比例填充容器，不会拉伸变形 */
    /* cover：裁剪多余部分填满容器；contain：完整显示图片可能留空白，按需选择 */
    object-fit: cover;
}

.product-grid .pic-1 {
    opacity: 1;
    -webkit-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.product-grid:hover .pic-1 {
    opacity: 1;
}

.product-grid .pic-2 {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.product-grid:hover .pic-2 {
    opacity: 1;
}

关键修改说明 #

1. padding-top: 100%：这是实现响应式固定宽高比的经典技巧，padding的百分比基于父元素宽度计算，100%就意味着容器高度等于宽度，完美实现正方形区域。
2. object-fit: cover：让图片按自身比例填充整个容器，超出部分自动裁剪，既保证图片不变形，又能填满容器。如果希望完整显示图片，可换成object-fit: contain。
3. 绝对定位的链接容器：把.product-image a设置为绝对定位并填满容器，确保整个图片区域都能被点击。

这样修改后，不管你的原始图片尺寸如何，每个网格卡片的图片区域都会保持统一尺寸，完全符合你的期望效果~

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