@media查询和图像交换 [英] @media queries and image swapping

问题描述

我是新来的CSS和这个论坛。但是我一直在研究一个小项目，在浏览器调整大小时，我希望我的站点中的图像完全更改。

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

解决方案

将来请添加您试过的代码。 b
$ b

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

HTML

 < img src =image.jpgclass =image1/> 
< img src =image.jpgclass =image2/> 
  

CSS

  .image2 {
 display：none; 
} 
 
 @media唯一屏幕和（max-width：500px）{//一些值
 .image1 {
 display：none; 
} 
 
 .image2 {
 display：block; 
} 
} 
  

示例1 - SHRINK BROWSER

$ b

或

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

HTML

 < div class =example>< / div> 
  

CSS

  .example {
 background-image：url（example.jpg）; 
} 
 
 @media仅限屏幕和（max-width：500px）{//一些值
 
 .example {
 background-image：url （ example2.jpg）; 
} 
} 
  

示例2 - 收起浏览器

I'm new to CSS and to this forum. But I've been working on a little project where I want the image in my site to completely change when the browser is resized.

I've been using media-queries? but I can't seem to get it right. any thoughts/tips?

解决方案

In the future please add code you've tried.

if it's an image tag you can use a class. Hide the second image on page load and show + hide image 1 at a certain screen size like so:

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

OR

If it's a background-image you can simply swap the 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

这篇关于@media查询和图像交换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！