js 怎么样窗口居中显示图片

在JavaScript中使窗口居中显示图片，主要的步骤包括获取窗口的尺寸、计算图片的位置、设置图片的样式、并将其添加到DOM中。

获取窗口尺寸：通过window.innerWidth和window.innerHeight来获取当前窗口的宽度和高度。
计算图片位置：根据图片的尺寸和窗口的尺寸计算出图片应当显示的位置，以使其居中。
设置图片样式：通过CSS设置图片的样式，使其居中显示。
添加到DOM中：使用JavaScript将图片元素添加到DOM中。

获取窗口尺寸是实现居中显示的关键步骤之一。通过获取窗口的宽度和高度，可以确定图片的中心位置，使其在不同的屏幕尺寸下都能居中显示。

接下来，我们将详细展开每个步骤。

一、获取窗口尺寸

要使图片居中显示，首先需要获取当前窗口的宽度和高度。可以使用以下代码来实现：

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

这两行代码分别获取了窗口的宽度和高度，这些数值将用于计算图片的居中位置。

二、计算图片位置

假设图片的宽度和高度分别为 imgWidth 和 imgHeight，可以通过以下公式计算出图片应当显示的位置：

var imgWidth = 300; // 假设图片宽度为300px
var imgHeight = 200; // 假设图片高度为200px
var posX = (windowWidth - imgWidth) / 2;
var posY = (windowHeight - imgHeight) / 2;

上述代码中的 posX 和 posY 分别表示图片在窗口中的横向和纵向位置，使其居中显示。

三、设置图片样式

接下来，通过CSS设置图片的样式，使其在窗口中居中显示：

var img = document.createElement('img');
img.src = 'path/to/your/image.jpg'; // 替换为实际图片路径
img.style.position = 'absolute';
img.style.left = posX + 'px';
img.style.top = posY + 'px';

这里通过设置 position 为 absolute，并使用 left 和 top 属性来定位图片的位置。

四、添加到DOM中

最后，将图片元素添加到DOM中，使其显示在窗口中：

document.body.appendChild(img);

通过上述步骤，图片将被添加到网页中，并居中显示。

五、响应窗口大小变化

为了确保在窗口大小变化时，图片仍然居中，可以监听窗口的 resize 事件，并重新计算图片的位置：

window.addEventListener('resize', function() {
    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;
    posX = (windowWidth - imgWidth) / 2;
    posY = (windowHeight - imgHeight) / 2;
    img.style.left = posX + 'px';
    img.style.top = posY + 'px';
});

这样，当用户调整窗口大小时，图片的位置也会随之调整，始终保持居中。

六、案例展示

为了更好地理解上述内容，以下是一个完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片居中显示</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script>
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;
        var imgWidth = 300; // 假设图片宽度为300px
        var imgHeight = 200; // 假设图片高度为200px
        var posX = (windowWidth - imgWidth) / 2;
        var posY = (windowHeight - imgHeight) / 2;
        var img = document.createElement('img');
        img.src = 'path/to/your/image.jpg'; // 替换为实际图片路径
        img.style.position = 'absolute';
        img.style.left = posX + 'px';
        img.style.top = posY + 'px';
        document.body.appendChild(img);
        window.addEventListener('resize', function() {
            windowWidth = window.innerWidth;
            windowHeight = window.innerHeight;
            posX = (windowWidth - imgWidth) / 2;
            posY = (windowHeight - imgHeight) / 2;
            img.style.left = posX + 'px';
            img.style.top = posY + 'px';
        });
    </script>
</body>
</html>

通过以上步骤和示例代码，可以在JavaScript中实现窗口居中显示图片的效果。希望这篇文章对你有所帮助，并能够在实际开发中应用这一技巧。