通过 JavaScript 设置 Img 的高度

肖恩

我目前遇到我的代码问题。我试图通过 JavaScript 设置图像的高度,以检查其小于 600 像素。我已经尝试了大量替代一般“this.height = 600”的方法,但没有一个成功。我真的希望有人能帮我解决这个问题。

<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”,但从未真正设置过高度。

编辑:在不知道的CSS属性max-height,并max-width在当时。Lain 引起了我的注意。谢谢

其他

使用 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");

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

通过JavaScript设置2格的高度

来自分类Dev

Javascript如何设置自己的img宽度和高度(调整大小)

来自分类Dev

Meteor.js:如何通过Javascript动态设置div高度

来自分类Dev

通过UICollectionView的高度设置UITableViewCell的高度

来自分类Dev

通过jQuery设置最小高度

来自分类Dev

设置img标签的高度等于其宽度

来自分类Dev

javascript加载的img仍为0高度

来自分类Dev

在JavaScript中设置div高度

来自分类Dev

如果useragent是iOS,则无法通过javascript设置img data-srcset

来自分类Dev

Android:通过ViewTreeObserver设置视图高度

来自分类Dev

通过数量或行数设置TableView的高度

来自分类Dev

通过媒体查询设置iframe的高度

来自分类Dev

如果宽度/高度比固定,是否可以使用纯CSS根据<img>的100%宽度设置高度?

来自分类Dev

在Javascript中设置部分的宽度和高度

来自分类Dev

用Javascript动态设置元素的高度

来自分类Dev

通过属性javascript检测元素的高度

来自分类Dev

通过jquery / javascript更改图像高度

来自分类Dev

设置文本后通过自动布局获取UITextView动态高度

来自分类Dev

通过数据属性设置每个DIV的高度

来自分类Dev

如何通过PX在DP中设置高度和宽度

来自分类Dev

通过数据属性设置每个DIV的高度

来自分类Dev

如何通过javascript设置ngModelOptions?

来自分类Dev

通过Javascript设置VideoJS源

来自分类Dev

通过.css将<div>的高度设置为另一个<div>的高度

来自分类Dev

如何通过ul / li元素的可变高度设置自动div高度

来自分类Dev

通过比较两个高度来改进设置div高度的脚本

来自分类Dev

jQuery查找img大小并将其设置为div css的高度和宽度

来自分类Dev

无法以编程方式在WPF中设置动画控件的宽度或高度(甚至无法通过Snoop设置)

来自分类Dev

将div高度设置为相等的宽度(javascript)

Related 相关文章

  1. 1

    通过JavaScript设置2格的高度

  2. 2

    Javascript如何设置自己的img宽度和高度(调整大小)

  3. 3

    Meteor.js:如何通过Javascript动态设置div高度

  4. 4

    通过UICollectionView的高度设置UITableViewCell的高度

  5. 5

    通过jQuery设置最小高度

  6. 6

    设置img标签的高度等于其宽度

  7. 7

    javascript加载的img仍为0高度

  8. 8

    在JavaScript中设置div高度

  9. 9

    如果useragent是iOS,则无法通过javascript设置img data-srcset

  10. 10

    Android:通过ViewTreeObserver设置视图高度

  11. 11

    通过数量或行数设置TableView的高度

  12. 12

    通过媒体查询设置iframe的高度

  13. 13

    如果宽度/高度比固定,是否可以使用纯CSS根据<img>的100%宽度设置高度?

  14. 14

    在Javascript中设置部分的宽度和高度

  15. 15

    用Javascript动态设置元素的高度

  16. 16

    通过属性javascript检测元素的高度

  17. 17

    通过jquery / javascript更改图像高度

  18. 18

    设置文本后通过自动布局获取UITextView动态高度

  19. 19

    通过数据属性设置每个DIV的高度

  20. 20

    如何通过PX在DP中设置高度和宽度

  21. 21

    通过数据属性设置每个DIV的高度

  22. 22

    如何通过javascript设置ngModelOptions?

  23. 23

    通过Javascript设置VideoJS源

  24. 24

    通过.css将<div>的高度设置为另一个<div>的高度

  25. 25

    如何通过ul / li元素的可变高度设置自动div高度

  26. 26

    通过比较两个高度来改进设置div高度的脚本

  27. 27

    jQuery查找img大小并将其设置为div css的高度和宽度

  28. 28

    无法以编程方式在WPF中设置动画控件的宽度或高度(甚至无法通过Snoop设置)

  29. 29

    将div高度设置为相等的宽度(javascript)

热门标签

归档