html - 如何处理移动屏幕和标签屏幕中宽度和高度为 100% 的背景图片？

Question

我有几页在每页中包含宽度为 100% 和高度为 100% 的背景图像。这意味着无论何时加载页面，您都会看到一张 100% 屏幕大小的图像。当我在笔记本电脑上看到这些页面时，一切都很完美。当我在移动屏幕上查看它们时，我遇到了问题。

我只想知道大家遇到这些情况是怎么处理的。我的意思是如何在响应式屏幕中将主 div 的宽度和高度更改为 100%？

如果我将背景大小设置为 100%，图像会被拉伸(stretch)。

如果我将背景大小设置为包含，则图像的某些部分会被剪切。

我希望图像的清晰度应该是完美的。我应该将主 div 的宽度设置为自动吗？或者我应该更改响应屏幕中的图像吗？

有没有办法让这个 div 在小屏幕上看起来更好？

我只希望我的主 div 适合响应式屏幕。

看起来图像或我的代码中不应该有缺陷。

这是我的主要 div 代码:

html,
body {
  width: 100%;
  height: 100%;
}

.main-div {
  width: 100%;
  height: 100%;
  background-image: url('http://vignette4.wikia.nocookie.net/marveldatabase/images/8/8c/Wolverine_Vol_3_73_Variant_Frame_Textless.jpg/revision/latest?cb=20090925123509');
}

<div class="main-div">

</div>

Answer 1

有很多选项可以使图像响应。请 Google 找出最适合您要求的方法。您会发现有用的解决方案取决于您使用的图像。这取决于图像的大小和质量。

我发现以下链接很有帮助。

• > https://www.w3schools.com/css/css_rwd_images.asp
• > https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp