浏览器缩小时无法缩放右侧浮动背景图的解决方法咨询

我有一段文本和一个设置为右侧浮动的背景图，初始显示效果如下：

对应的HTML代码：

<body>
  <div id="container">
    <div id="img"/>
    <p>
    What is Lorem Ipsum?..... etc
    </p>
  </div>
</body>

设置背景图的初始CSS代码：

#img {
  background-image: url('http://www.w3.org/2008/site/images/logo-w3c-screen-lg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  height: 140px;
  width: 250px;
  float: right;
}

当缩小浏览器窗口时，希望背景图能同步缩放以避免挤压左侧文本，但实际缩小窗口后文本被挤压：

尝试将CSS中的宽高改为百分比值后，背景图完全不显示，修改后的CSS代码：

#img {
  background-image: url('http://www.w3.org/2008/site/images/logo-w3c-screen-lg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  height: 30%;
  min-height: 30%;
  width: 30%;
  min-width: 30%;
  float: right;
}

请问如何实现浏览器窗口resize时背景图的正常缩放？

解决方案 #

1. 修复百分比高度不生效问题
   百分比高度依赖父元素的明确高度，否则子元素无法计算相对高度。给根元素和容器设置高度：

html, body {
  height: 100%;
  margin: 0;
}
#container {
  height: 100%;
  overflow: auto;
}

2. 保持比例的自适应缩放
   使用aspect-ratio属性锁定元素宽高比，结合百分比宽度实现同步缩放，同时保证背景图显示正常：

#img {
  background-image: url('http://www.w3.org/2008/site/images/logo-w3c-screen-lg');
  background-size: cover; /* 可选contain，根据需求选择显示方式 */
  background-repeat: no-repeat;
  background-position: center;
  width: 30%;
  aspect-ratio: 250/140; /* 对应原宽高250px/140px的比例 */
  float: right;
}

• cover会让背景图覆盖整个元素区域，可能裁剪边缘；contain会完整显示图片，元素内可能出现空白。
• aspect-ratio确保元素始终保持原始比例，窗口缩放时同步调整大小，不会挤压左侧文本。

3. 小屏幕适配优化
   通过媒体查询在小屏幕下调整图片宽度，避免占用过多空间：

@media (max-width: 768px) {
  #img {
    width: 40%;
  }
}

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