缩小浏览器时无法缩放浮动右侧图像答案

【问题标题】：Cannot scale float right image when making browser smaller缩小浏览器时无法缩放浮动右侧图像
【发布时间】：2023-02-03 20:25:42
【问题描述】：

我有一些文本和图像漂浮在右边，看起来像这样：

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 中使用百分比，我什么也得不到。见下文：

#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;
}

调整浏览器大小时如何使图像正确缩放？

playcode URL

【问题讨论】：

你试过引导程序吗？
以百分比表示的高度要求父元素具有明确的高度，否则首先与百分比无关。
“无法缩放浮动右图像”- 这里没有实际图像；如果这样做，您一开始就不会遇到这个问题——图像具有固有的纵横比，因此将宽度和离开高度指定为 auto 就可以了。但是仅仅一个 div 就没有那个。如果您知道所用图像的纵横比，您可以尝试在您的 div 上使用 aspect-ratio 属性，这样只指定宽度，应该会产生正确的对应高度。

标签： html css

【解决方案1】：

如果你用百分比设置高度和宽度，用像素设置最小值，它就可以正常工作。

  height: 30%;
  min-height: 300px;
  width: 30%;
  min-width: 150px;

不确定这是否是您想要的

playcode

【讨论】：