通过 JavaScript 设置 Img 的高度

Question

我目前运行我的代码有问题。我试图通过 JavaScript 设置图像的高度，以检查其是否小于 600 像素。我已经尝试了很多替代一般 "this.height = 600" 的方法，但是 none 已经成功了。我真的很希望有人能帮我解决这个问题。

<div id="cursedframe">  
  <img src="" id="cursedimg">
</div>

<script>

function setImage() {
    var img = new Image();
    var images = [
        "bean.jpg",
        "xxx-edit-parallax/Images/xxx-5.jpg"
    ];

    var chosen = images[Math.floor(Math.random() * images.length)];

    img.onload = function(){

    if (this.height > 600) {
            console.log("more than");
            this.height = 600;
            console.log(img.height);
        } else {
            console.log("less than");
            this.height = "auto";
            console.log(this.height);
        }
    };

    img.src = chosen.toString();
    document.getElementById("cursedimg").src = img.src;
}   


</script>

它成功通过了 "if" 但从未真正设置高度。

编辑： 当时不知道 max-height 和 max-width 的 CSS 属性。被Lain引起了我的注意。谢谢

Answer 1

使用 css 属性 max-height.

会容易得多

只是为了显示 javascript 中方法的实际缺陷：您必须将高度传递给实际图像。目前您只是将它设置为 img 对象，而从未设置为显示的图像 <img src="" id="cursedimg">.

var img = new Image();
var images = ['https://logosmarken.com/wp-content/uploads/2018/05/Google-Logo.png'];
var maxHeight = 200; //REM: For my test image

img.onload = function(){
    if (this.height > maxHeight) {
        console.log("more than");
        this.height = maxHeight;
        console.log(img.height);
    } else {
        console.log("less than");
        this.height = "auto";
        console.log(this.height);
    };
    
    //REM: Here you need to assign the src along with the height
    document.getElementById("cursedimg").src = this.src;
    document.getElementById("cursedimg").style.height = this.height + 'px';
};

//REM: No need for toString() - it already is.
img.src = images[Math.floor(Math.random() * images.length)];

<div id="cursedframe">  
  <img src="" id="cursedimg">
</div>

更简单的方法是根本不创建新对象并按原样分配它： var img = document.getElementById("cursedimg");

Answer 2

通过运行以下代码，您将唯一的 src 属性分配给 img 元素

img.src = chosen.toString();
document.getElementById("cursedimg").src = img.src;

如果要使用 javascript 设置图像元素的高度和 src，您可以执行以下操作：

var image = document.getElementById("cursedimg");
if ( image.height > 600 ){
     image.height = 600;
}
else{
     image.style.height = "auto";     // since 'auto' is a styling value
}
image.src = chosen.toString();

通过 JavaScript 设置 Img 的高度

Set height of Img via JavaScript

javascript

height