如何修复移动版上未覆盖整个页面的bg图像？答案

【问题标题】：How to fix a bg image that doesn't cover the entire page on mobile version?如何修复移动版上未覆盖整个页面的bg图像？
【发布时间】：2019-03-28 04:22:59
【问题描述】：

我想为我用 Wordpress 制作的网站页面之一设置背景图像，但在移动版本上它保持正常的纵横比。这里是网站页面http://zm.jcreator.eu/

css:

.entry-content #fit {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}

The code snippet in the page editor:

<img id="fit" src="http://zm.jcreator.eu/wp- 
content/uploads/2019/03/home_1.jpg" alt="">

【问题讨论】：

把它变大，或者把屏幕变小......哈哈......无论如何这不是背景图像，所以任何使用background-的尝试都会失败，因为它是<img标签。我可能会补充说，使用图像标签会更具挑战性，因为你对 CSS 的控制较少，而且它更依赖于页面的结构。
这里没有提供足够的信息。您声明的 CSS 选择器甚至没有在短代码 sn-p 中实现。请提供更多信息，以便我们提供更好的帮助。
如果我理解你，你可以添加这个代码height: 100vh; background-size: cover;

标签： php html css wordpress background

【解决方案1】：

至少有两种方法可以接近它。

1) 将您的图像绝对定位在容器内。

<div class="entry-content">
  <div class="img-wrapper">
   <img id="fit" src="..." alt/>
  </div>
</div>

如果我们假设您希望图像占浏览器宽度和高度的 100%，那么您的 css 应该如下所示（注意我忽略了 entry-content，因为我不太确定其余内容是否会在新的 div 中 - 在您的示例中似乎很不清楚）。

.img-wrapper {
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
}


.img-wrapper img {
    position:absolute;
    top:50%
    left:50%;
    transform:translate(-50%,-50%);
}

这种方法的噱头 - 它只适用于由图像纵横比决定的某些场景。一种解决方法是使用 JavaScript sn-p，您可以在文档加载和调整大小时绑定它。然后，您可以使用以下 JavaScript 来计算特定场景下图像的最佳尺寸：

function checkImg() {
    var img = document.getElementById('fit'));
    var section = document.getElementsByClassName('entry-content')[0];
    var imgheight = img.offsetHeight;
    var sectionheight = section.offsetHeight;
    var imgwidth = img.offsetWidth;
    var sectionwidth = section.offsetWidth;

        var imgRatio = imgheight / imgwidth;
        var scrRatio = sectionheight / sectionwidth;

        if (scrRatio > imgRatio) {
            var finalHeight = sectionheight;
            var scale = finalHeight / imgheight;
            var finalWidth = imgwidth * scale;
        } else {
            var finalWidth = sectionwidth;
            var scale = finalWidth / imgwidth;
            var finalHeight = imgheight * scale;
        }
        img.style.height = finalHeight + 'px';
        img.style.width = finalWidth + 'px';
    }
}

请记住，在加载文档后运行此函数至关重要，而不仅仅是准备好，否则如果在加载之前执行该函数，它将无法获得正确大小的图像。

同时如果你在resize时不触发，图片的宽高不会改变。

2) 使用 css 背景属性。正如 ArtisticPhoenix 指出的那样，您不能在图像标签上使用背景属性。但是，您可以将图像设置为元素的背景。然后您可以使用以下内容：

<div class="entry-content">
  <div class="img-wrapper">
  </div>
</div>

请注意，您不会将图像与 img 标签一起放在这里，而是必须在 CSS 中指定 background-image 属性的来源，如下所示：

.img-wrapper {
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-image:url('http://zm.jcreator.eu/wp-content/uploads/2019/03/home_1.jpg');
}

由于您使用的是 WordPress，因此您可能希望使用您在 CMS 中选择的图像。在这种情况下，您只需要使用内联样式指定背景图像：

<div class="entry-content">
  <div class="img-wrapper" style="background-image:url('<?php echo your_php_function_to_get_img_url(); ?>')">
  </div>
</div>

【讨论】：