如何用JavaScript设置图片宽高？背景图过度拉伸问题求助

核心错误点 #

• 数组不能设置DOM元素属性：你尝试给mobileImages和desktopImages这两个数组对象设置style.width、style.height、width、height属性，但数组本身没有这些DOM元素特有的属性，这些代码完全无效，根本不会对背景图片的尺寸产生任何影响。
• 背景尺寸控制逻辑偏差：当前背景图片的拉伸问题和你写的这些无效代码无关，而是由CSS的background-size属性决定的。

修复方案 #

1. 清理无效的JavaScript代码 #

移除数组上的无效属性设置，简化代码逻辑：

function changeImg() {
    const mobileImages = ["images/1mini.png", "images/2mini.png", "images/3mini.png"];
    const desktopImages = [
        "images/desktop/1.jpg", "images/desktop/2.jpg", "images/desktop/3.jpg",
        "images/desktop/4.jpg", "images/desktop/5.jpg", "images/desktop/6.jpg",
        "images/desktop/7.jpg", "images/desktop/8.jpg", "images/desktop/9.jpg",
        "images/desktop/10.jpg", "images/desktop/11.jpg", "images/desktop/12.jpg",
        "images/desktop/13.jpg", "images/desktop/14.jpg", "images/desktop/15.jpg",
        "images/desktop/16.jpg", "images/desktop/17.jpg", "images/desktop/18.jpg",
        "images/desktop/19.jpg", "images/desktop/20.jpg", "images/desktop/21.jpg",
        "images/desktop/22.jpg", "images/desktop/23.jpg", "images/desktop/24.jpg",
        "images/desktop/25.jpg"
    ];

    // 检测移动设备
    const isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
    const targetImages = isMobile ? mobileImages : desktopImages;
    const newImgNumber = Math.floor(Math.random() * targetImages.length);
    
    document.body.style.backgroundImage = `url(${targetImages[newImgNumber]})`;
}

window.onload = changeImg;

2. 调整CSS解决图片拉伸问题 #

根据需求选择以下两种CSS配置：

选项A：保持图片比例，完整显示（无拉伸）

适合希望图片完整展示、不裁剪的场景：

body, html {
    margin: 0;
    overflow: hidden;
    height: 100vh; /* 确保容器占满整个视口高度 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

选项B：覆盖容器，最小化拉伸（可能裁剪）

适合希望图片铺满容器、尽量保持比例的场景：

body, html {
    margin: 0;
    overflow: hidden;
    height: 100vh;
    background-size: cover;
    background-position: center center;
}

内容的提问来源于stack exchange，提问作者fullstackgenerator