html - 调整窗口大小时缩小图像

Question

我有一个背景图像设置为背景，我想要这样，当用户缩小窗口时，它会随之调整大小:

HTML:

<div class="parallax">
  </div>

CSS:

.parallax {
  background-image: url("../Images/back1.jpg");
  min-height: 700px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 20px;
}

当我更改 background-size: cover; 时，它就可以工作了；包含，但它从左侧和右侧切掉了一些图像。

fiddle 链接:here

Answer 1

除了我的评论之外，这是我在上一条评论中写的内容 - 带有 width: 100% 和 height: auto 的常规 img 标签 而不是背景图像:

img {
  width: 100%;
  height: auto;
}

<div>
  <img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>