html - @media 查询和图像交换

Question

<分区>

Answer 1

以后请添加您尝试过的代码。

如果它是一个 image 标签，你可以使用一个类。在页面加载时隐藏第二张图片，并在特定屏幕尺寸下显示 + 隐藏图片 1，如下所示:

HTML

<img src="image.jpg" class="image1"/>
<img src="image.jpg" class="image2"/>

CSS

.image2{
   display: none;
}

@media only screen and (max-width: 500px){ //some value
   .image1{
     display: none;
   }

   .image2{
     display: block;
   }
}

EXAMPLE 1 - SHRINK BROWSER

或

如果它是background-image，您可以简单地交换图像:

HTML

<div class="example"></div>

CSS

.example{
   background-image: url("example.jpg");
}

@media only screen and (max-width: 500px){ //some value

   .example{
      background-image: url("example2.jpg");
   }
}

EXAMPLE 2 - SHRINK BROWSER