Question

我在这里回顾了一些问题和答案，仍然找不到我的问题。

我想做的是：根据屏幕大小打开或关闭这三个图像的显示属性。一次只能显示一个图像。

我没有将任何css应用于.imagephone，除了@media查询部分中列出的内容。

.imgcontainer{
    background-color: red;
    width: 100%;
    overflow: hidden;
    max-width: 1500px;
    margin: auto;
}

.imagetablet{
    display: none;
}

.imagedesktop{
    display: none;
}

/**************@Media Tablets****************/
    
    @media screen and (max-width="800px"){
        .imagephone{display:none;}
        .imagetablet{display:block;}
        .imagedesktop{display:none;}
        }

/**************@Media Desktop*****************/
    
    @media screen and (max-width="1200px"){
        .imagephone{display:none;}
        .imagetablet{display:none;}
        .imagedesktop{display:block;}
        }

<div class="imgcontainer">
        <img class="imagephone" src="BannerPicSmall.png">
        <img class="imagetablet" src="BannerPicMedium.png">
        <img class="imagedesktop" src="BannerPicLarge.png">
    </div>

Answer 1

 	.imgcontainer{
    background-color: white;
    width: 100%;
    overflow: hidden;
    max-width: 1500px;
    margin: auto;
}

.imagetablet{
    display: none;
}

.imagedesktop{
    display: none;
}

/**************@Media Tablets****************/
    
    @media screen and (max-width:800px){
        .imagephone{display:none !important;}
        .imagetablet{display:block !important;}
        .imagedesktop{display:none !important;}
        }

/**************@Media Desktop*****************/
    
    @media screen and (max-width:1200px){
        .imagephone{display:none !important;}
        .imagetablet{display:none !important;}
        .imagedesktop{display:block !important;}
        }

<div class="imgcontainer">
        <img class="imagephone" src="http://www.claudelorrain.org/An-Artist-Studying-Nature.jpg">
        <img class="imagetablet" src="http://hdwallpaperia.com/wp-content/uploads/2015/01/Nature-Wallpaper-daydreaming-34811101-1024-7686-640x480.jpg">
        <img class="imagedesktop" src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Beautiful-Nature-Desktop-Wallpaper-640x360.jpg">
    </div>

试试这个。

希望它有所帮助。

@media query <img/> src swap无法正常工作

1 个答案: