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

您可以使用Media Queries使用纯CSS，使用窗口调整大小事件使用jQuery（您也可以使用纯javascript执行此操作，但在示例代码中使用jQuery）。

CSS Way

<强> 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 Way

<强> 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

Answer 2

为了在调整窗口大小时更改图像属性，您需要为适当的resize事件注册处理程序。例如（在JavaScript中;我不知道jquery）：

window.addEventListener("resize", handleResize, false);

其中`handleResize＆＃39;是包含代码的函数。另外，我不确定如果你有＆＃34;可见性：隐藏＆＃34;会发生什么？和＆＃34;能见度：可见＆＃34;设置在同一个对象上;您可能希望以某种方式在两个类之间切换，而不是每次调用处理程序时都添加一个新类。

如果您可以大致按照自己的意愿行事，请查看https://github.com/rdegraaf/dyphal/blob/master/www/dyphal.js#L309中的fitPhoto函数。

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

2 个答案: