如何居中呢?使用CSS或Javascript作为背景

How do I center <img> as background with CSS or Javascript?

本文关键字：Javascript 背景 CSS 何居中 使用      更新时间：2023-09-26

我刚刚为客户启动了一个网站，使用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使它工作吗?

提前感谢:)

如果我得到了它的正确，你试图使背景图像响应在不同的视图端口通过创建另一个img在你的div.si?

试着把它用在你的div.si中。

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

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

你可以尝试在你的图像css:

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

不要忘记转换行上的前缀

也许你可以使用"object-fit: cover;"属性

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

浏览器支持

这里是链接引用

使用媒体查询比使用jquery方法更好，因为它可以通过css
处理
相关文章：