css - 如何缩小图像以使其在移动设备上看起来正确

Question

我在为移动设备缩小图像时遇到问题。如果您在桌面查看此链接，则图像很好:
https://www.thecompleteapproach.co.uk/go/success-to-soar/
但是在设备中查看它并且它被放大了。我需要对其进行缩放，以便它在移动设备和桌面上看起来都很好。有人可以指出我正确的方向吗？
CSS:

body {
background-image: url(./wp-content/uploads/2000/01/image_example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

Answer 1

使用 background-size: contain将根据浏览器窗口的大小缩放图像。正如@MTK 提到的，您也可以使用 background-size: 100%或 background-size: 100% auto .

body {
  background-image: url(./wp-content/uploads/2000/01/image_example.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}