Question

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

我只是想知道每个人在这些情况下如何处理。我的意思是如何在响应式屏幕中对宽度和高度为100％的主div进行更改？

如果我将背景大小设置为100％，图像会变得拉长。

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

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

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

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

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

这是我的主要代码：

＆＃13;

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');
}

＆＃13;

<div class="main-div">

</div>

＆＃13;

Answer 1

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

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

Answer 2

对于响应式图像

 .class_name{
  max-width: 100%, 
  height: auto,
  display:block
}

全屏响应图像使用个别类

.class_name{
        background-image: url(image path) ;
        background-position: center center;
        background-repeat:  no-repeat;
        background-attachment: fixed;
        background-size:  cover;
        background-color: #999;
      }

Answer 3

html,
body {
  max-width: 2000px;
  min-width: 100px;
  height: auto;
}

.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>

这应该使它具有响应性。我不知道你希望DIV是什么样的，所以我就把它留下了。

如何在移动设备和标签屏幕中处理100％宽度和高度的背景图片？

3 个答案: