无法更改javascript中的高度，但是可以更改宽度

如何解决无法更改javascript中的高度，但是可以更改宽度

我正在用HTML / PHP创建一个网站。我希望图像大小不同，这取决于您是在手机还是PC上观看。奇怪的是，在我的页面之一上，当我在控制台中键入内容时，这两个属性都会更新屏幕上的图像，我忘了添加与页脚相关的页脚图像，这些页面使用与ID为footerimage的页脚相同的图像。 / p>

这是HTML

<body onload="detectClient()">
    <header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
        <img class="w3-image" src="img/Websitebackground.png" alt="logo" width="1500" height="1000" id="headerimage">
    </header>
    ...

这是JavaScript：

function detectClient() {
    if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){ 
      console.log(navigator.userAgent);
      document.getElementById("footerimage").width = "1500";
      document.getElementById("footerimage").height = "1000";
    } else { 
      console.log(navigator.userAgent);
      document.getElementById("headerimage").style.width = "1500";
      document.getElementById("headerimage").style.height = "450";
      console.log(console.error());
      console.log(document.getElementById("headerimage").height)

控制台日志记录供我在控制台中查看该代码是否正确执行。我已经把jsfiddle放在一起应该可以了。 https://jsfiddle.net/9frpzy0k/

解决方法

如今不使用jQuery的原因是什么？有些事情效果更好，将来可能还会发现其他优点。请注意，我没有验证您的if语句是否适用于移动设备。

另一方面。调整图像大小不会裁剪图像，而只是调整大小，这看起来有点...很奇怪。相反，我建议使用香草CSS使用适合div容器的背景图片。使用这种方法，您可以使用纯CSS模拟crop解决方案。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>

<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
    <img class="w3-image" src="https://placem.at/things?w=1500&h=1000&random=image_1&txt=Image+1500+1000" alt="logo" width="1500" height="1000" id="headerimage">
</header>

<script>
    $(document).ready(function () {
        let $headerImage = jQuery('#headerimage');

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            console.log(navigator.userAgent,'mini');
            $headerImage.width(1500);
            $headerImage.height(1000);
        } else {
            console.log(navigator.userAgent,'else statement');
            $headerImage.width(1500);
            $headerImage.height(450);
        }
    });
</script>

</body>
</html>

发布脚本

这也应该在您的代码中起作用

let img = document.getElementById("headerimage");

img.style.width = '1500px';
img.style.height = '450px';

或

img.width = 1500;
img.height = 450;

无法更改javascript中的高度，但是可以更改宽度

如何解决无法更改javascript中的高度，但是可以更改宽度

解决方法

相关推荐