当我的视口扩展和收缩时，如何让我的图像缩小？

Question

我试图随着视口的增加而增加，而图像随着视口的减少而减少。我希望图像的大小相对于浏览器大小（即支持多种计算机屏幕配置和移动设备的能力）。我尝试过不同的大小和位置修复，但似乎无法正常工作。任何帮助都会很棒。我仍然希望文本浮动在图像之上。

html

    <body>
  <div class="section-one">
    <img id="section-one-img"
      src="https://lh3.googleusercontent.com/GBvmwi54ldCYsikrFDxR5MV14hiAmR_oNp3sV1yuEYcfLG084LaGDcfffJIUMgETr2E6Tdu20FpvySni5wuk7c3W6GykxW3RxJ-X0t4YcZduf2YwAOSsOYuc2cMe8KecFlvVkreZny8=w2400"
      alt="Interlaken Image Background">
    <div class="slogan">lorem <strong>ipsum</strong> lorum.</div>
</body>

css

.section-one-img {
  position: relative;
  z-index: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90%;
}

.slogan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

Answer 1

您的 css 没问题，但您将 .section-one-img 定义为 class，然后将其用作 html.

中的 ID

将其更改为 #section-one-img，或将 <img> 标记更改为：

<img class="section-one-img" src="..." alt="Interlaken Image Background" />

当我的视口扩展和收缩时，如何让我的图像缩小？

How do I get my image to shrink as my viewport expands and contracts?

html

css