屏幕缩小时如何裁剪带背景图div的多余高度？

要实现屏幕缩小时自动裁剪背景图的多余部分，核心是让容器保持固定宽高比，同时裁剪超出范围的内容，以下是两种可行方案：

方法一：使用padding-top维持宽高比（兼容旧浏览器） #

通过padding-top的百分比特性（基于父元素宽度计算）实现自适应宽高比，搭配overflow: hidden裁剪溢出内容：

.blog-img {
  width: 100%;
  max-width: 600px; /* 保留原设计的最大宽度，避免容器过宽 */
  height: 0; /* 让padding完全撑起容器高度 */
  padding-top: 83.33%; /* 500/600≈83.33%，对应原宽高比600:500 */
  background-size: 100% auto;
  background-position: center; /* 可选，让裁剪时图片居中显示 */
  background-repeat: no-repeat;
  overflow: hidden; /* 裁剪超出容器的背景图部分 */
}

方法二：使用aspect-ratio属性（现代浏览器首选） #

CSS3新增的aspect-ratio属性可直接定义容器宽高比，写法更简洁：

.blog-img {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 6/5; /* 直接设置宽高比6:5，对应原600px宽、500px高 */
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

关键说明 #

• 替换固定宽高为自适应宽高比后，容器会随屏幕宽度自动调整高度，始终保持原设计比例；
• overflow: hidden会自动裁剪超出容器范围的背景图部分，解决屏幕缩小时的多余内容问题；
• 若需调整裁剪区域，可修改background-position属性（比如top、bottom指定裁剪上下部分）。

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