如何在响应式页面中约束图片保持特定宽高比？

问题根源 #

你当前的代码给图片同时设置了height和width的百分比值（比如#chain的height:50%; width:80%、#mannequin的height:100%; width:100%），这会强制图片拉伸填充容器，直接破坏原有宽高比。而aspect-ratio没生效，是因为同时设置的宽高属性覆盖了比例约束。

解决方案 #

1. 基础适配：单维度+自动计算 #

对于需要保留原比例的图片，不要同时指定宽高，只设置其中一个维度，另一个用auto让浏览器自动计算：

修改模特图片样式

.middle #mannequin{
    width: 100%; /* 也可以选height:100%，二选一即可 */
    height: auto;
    object-fit: cover; /* 可选：填充容器并裁剪多余部分；要完整显示用contain */
}

修改链条图片样式

.middle #chain{
    width: 80%;
    height: auto;
    position:absolute;
    left: 10%;
    bottom:25%;
    /* 可选：如果要强制固定比例，比如原比例是4:1，添加下面一行 */
    aspect-ratio: 4/1;
}

2. 正确使用aspect-ratio #

如果要强制固定宽高比，需确保没有同时设置冲突的宽高值。比如设置比例后，仅指定宽度，高度会自动按比例计算：

.img {
    aspect-ratio: 16/9; /* 替换成你需要的比例，比如3/2、1/1等 */
    width: 100%;
    height: auto;
    object-fit: cover;
}

3. 锚点图片的比例修复 #

对于圆形锚点图片，强制正方形比例即可：

.anchor{
   position:absolute;
   width:5%;
   height: auto;
   aspect-ratio: 1/1; /* 确保是正方形，配合border-radius实现圆形 */
   border-radius: 50%;
   cursor: pointer;
}

完整修改后的CSS示例 #

.middle{
   position: absolute;
   height:75vh;
   width:60%; 
   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
   overflow: hidden; /* 可选：防止图片超出容器 */
}

.middle #chain{
    width:80%;
    height: auto;
    position:absolute;
    left: 10%;
    bottom:25%;
    aspect-ratio: 4/1; /* 替换为链条图片实际比例 */
    object-fit: contain; /* 完整显示图片 */
}

.middle #mannequin{
    width:100%;
    height: auto;
    object-fit: cover; /* 填充容器，裁剪多余部分 */
}

.anchors{
    position:absolute;
    top:25%;
    height:100%;
    width:100%;
    flex-direction: column;
    justify-content: space-between;
}

.anchor{
    position:absolute;
    width:5%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    cursor: pointer;
}

关键说明 #

• object-fit控制图片显示方式：
  • cover：按比例缩放填充容器，超出部分裁剪
  • contain：按比例缩放完整显示图片，容器留白
  • fill：强制拉伸填充（不推荐，会破坏比例）
• 不确定图片原比例时，优先用width:100%; height:auto（或反之）；需要固定比例时，再添加aspect-ratio。

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