Question

我刚刚为使用background-size: cover;的客户端推出了一个网站，以获取完整尺寸的背景图片，但它在移动版Safari中无效。

所以我使用img标签来显示图片，使用JS查找视口的宽高比，并根据宽高比相应地设置全宽/高度。

现在，我想知道如何在视口中居中这张照片。无论是在JS还是在CSS中。

代码：

div.si {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
}

<div class="si" style="background: url('bg.jpg') no-repeat fixed center; background-size: cover; position: absolute; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;">

  <img src="bg.jpg" style="width: auto; height: auto; min-height: 100%; min-width: 100%;" />

</div>

现在不要介意内联CSS;）

基本上img会在视口外溢出，所以我想知道如何将它锚定在中心，而不是左上角（top: 0, right: 0, bottom: 0, left: 0;）。我发现这很困难，因为图像比视口大，这就是为什么它似乎比margin: auto;或text-align: center;更难。

我是否可能需要JS来使其工作？

提前致谢：）

Answer 1

您可以在css中使用＆＃34; object-fit：cover;＆＃34; 属性来帮助您

你们必须在使用前检查浏览器支持。

Browser support

这是Link reference

并且使用媒体查询比使用 jquery 方法更好，因为它可以通过 css

进行处理

Answer 2

如果我说得对，你试图通过在div.si中创建另一个img来使背景图像在不同的视口中响应？

尝试将此用于div.si。

div.si {
  background-size: 100% 100%;
}

要使其响应，您需要更新较小视口上的background-size属性。你要么牺牲一部分背景，要么将它压在较小的屏幕上。

Answer 3

您可以尝试在图片css中添加它：

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

不要忘记变换线上的前缀。

如何使用CSS或Javascript将<img/>作为背景中心？

3 个答案: