jquery - 根据窗口大小调整图像大小而无需刷新页面

Question

我得到下面的代码，它根据窗口大小调整图像大小。我的代码仅在您调整大小时刷新屏幕以查看更改时才有效。如何根据屏幕大小使图像可见或隐藏，而无需刷新屏幕以查看图像的更改？有更好的方法吗？

JQuery

<script>
    if ($(window).width() < 950) {
       $('body').addClass('imgHide');
        console.log($(window).width());
    }
    else { 
       $('body').addClass('imgShow');
    }
</script>

CSS

.imgHide #DuckImg
{
    visibility: hidden;     
}

.imgShow #DuckImg
{
    visibility: visible;
}      

我的形象

<img id="DuckImg" class="DuckImg" src="DuckImg.png" alt="DuckImg"  >

Answer 1

您可以使用纯 CSS 使用 Media Queries 来完成它并使用 jQuery 使用窗口调整大小事件(您也可以使用纯 javascript 来完成，但您确实在示例代码中使用了 jQuery)。

CSS 方式

---

CSS

.DuckImg {
    visibility: visible;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 949px) {
    .DuckImg {
        visibility: hidden;
    }
}

HTML

<img id="DuckImg" class="DuckImg" src="http://weknowyourdreams.com/images/duck/duck-07.jpg" alt="DuckImg">

我的 CSS 示例页面:http://zikro.gr/dbg/html/imgSize/css.html

jQuery 方式

---

CSS

.DuckImg {
    visibility: visible;
    width: 100%;
    height: auto;
}

Javascript

jQuery(function($) {

    function doresize() {
        if($(document).width() < 950)
            $('#DuckImg').hide();
        else    
            $('#DuckImg').show();
    }

    $(window).on('resize', doresize);
    doresize();

});

HTML

<img id="DuckImg" class="DuckImg" src="http://weknowyourdreams.com/images/duck/duck-07.jpg" alt="DuckImg">

我的 jQuery 示例页面:http://zikro.gr/dbg/html/imgSize/jquery.html