网格布局中如何基于容器宽度计算图片高度？

关于容器的假设 #

你的假设没错，如果ul.gallery是你设置了固定宽度的父容器，那它就是图片的参考容器。问题出在百分比高度的生效逻辑，而非容器本身的选择。

核心问题原因 #

CSS中元素的height: %是基于父元素的明确高度值计算的，要是你没给ul.gallery设置固定height，图片的百分比高度会因为没有参考基准而失效，最终导致高度不足。

实现高度基于容器宽度计算的方案 #

要让图片高度随容器宽度变化，最可靠的方法是利用CSS中padding-top/padding-bottom的百分比值基于父元素宽度计算的特性，结合定位实现自适应比例：

1. 配置父容器ul.gallery
   设置固定宽度，同时开启相对定位作为子元素的定位参考，清除默认样式：

   ul.gallery {
     width: 700px; /* 替换成你的固定宽度 */
     position: relative;
     padding: 0;
     margin: 0;
     list-style: none;
   }
   

2. 给图片容器（li）设置比例
   通过padding-top定义宽高比，比如1:1比例就设为100%，16:9设为56.25%（9/16*100%）：

   ul.gallery li {
     position: relative;
     width: 100%; /* 若要多列布局，可改为50%（两列）、33.33%（三列）等 */
     padding-top: 100%; /* 替换为你需要的宽高比对应的百分比 */
     overflow: hidden;
   }
   

3. 让图片填充容器
   用绝对定位让图片占满容器，同时用object-fit保证图片比例正常：

   ul.gallery li img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover; /* 可选：cover填充容器裁剪图片，contain完整显示图片留空白 */
   }
   

补充说明 #

如果你的画廊是多列布局，只需调整ul.gallery li的width值即可，比如两列设为50%、三列设为33.33%，padding-top的比例值保持不变，图片会自动根据列宽计算高度，填充垂直空间。

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