背景图片在媒体查询中没有正确调整大小？

Question

这是我的代码：

      .review-dots-teal {
        background-image: url('./scss/img/dots-teal@1x.png');
        position: absolute;
        left: 0;
        top: 760px;
        z-index: -1;
        height: 368px;
        width: 368px;
        @include mediaQuery(992px) {
         width: 268px;
         height:268px;
        }
        @include mediaQuery(768px) {
         width: 168px;
         height:168px;
        }
      }

当媒体查询没有调整大小时，图像就像这样： 但是当应用媒体查询时，高度和重量减少，它看起来像这样：

图像没变小？点的大小相同，如何通过媒体查询使图像适合设置的宽度和高度？

Answer 1

您应该将width:100%添加到图片

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

这将确保图像始终占据容器的整个宽度。

以全屏模式和移动模式检查代码段

.container {
  width: 500px;
  margin: 0 auto;
}

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

@media(max-width:768px) {
  .container {
    width: 300px;
  }
}

<div class="container">
  <img src="https://i.stack.imgur.com/UUOYB.png" />
</div>

Answer 2

试试这个： 最大宽度：368像素; 宽度：100％

同样适用于身高和媒体查询