如何使用 JavaScript 将网页上的背景图像居中以获得不同的屏幕分辨率

How can I center a background image on a web page for different screen resolutions using JavaScript?

本文关键字：分辨率 屏幕 图像 JavaScript 何使用 网页 背景      更新时间：2023-09-26

我想确定客户端计算机的屏幕分辨率，并使用JavaScript在中心设置背景图像。

我已经走到了这一步：

function centerBackGroundImage()
{
    var browserWidth = document.documentElement.clientWidth;
    var browserHeight = document.documentElement.clientHeight;
    $("#background").css({ "z-index": "-10", "margin:left": (browserWidth / 2) - (browserHeight/ 2) });
}

我已经添加了名为 background 的div 标签和带有图像文件位置的 <img> 标签。

任何帮助将不胜感激。

你不需要JavaScript。

你可以只使用CSS background-position

： 
#background {
     background-image: url('https://www.google.com/images/srpr/logo3w.png');
     background-position: center;
     background-repeat: no-repeat;
}

演示 - 它也可以在元素中工作，而不仅仅是像我的例子那样body。

这将为您提供跨浏览器分辨率

var browserWidth = $(window).width();
var browserHeight = $(window).height();
相关文章：