@media查询和图像交换

Question

我是CSS和这个论坛的新手.但是我一直在做一个小项目,我希望我的网站中的图像在浏览器调整大小时完全改变.

我一直在使用媒体查询？但我似乎无法做对.任何想法/提示？

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;
   }
}

例1 - SHRINK BROWSER

要么

如果是a,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");
   }
}

例2 - 收缩浏览器

Answer 2

这可以使用HTML5 picture元素来完成,该元素不需要CSS来更改img指定媒体查询上的元素.如果你在这种方法intrested,你知道它的浏览器支持它确实不包括IE,虽然有一个填充工具旧版本浏览器.

<h1>Resize Window</h1>
<picture>
  <source srcset="https://placehold.it/1400x1400" media="(min-width: 1400px)"/>
  <source srcset="https://placehold.it/1200x1200" media="(min-width: 1200px)"/>
  <source srcset="https://placehold.it/800x800" media="(min-width: 800px)"/>
  <source srcset="https://placehold.it/600x600" media="(min-width: 600px)"/>
  <img src="https://placehold.it/400x400" alt="example"/>
</picture>