或

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

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

Answer 2

这可以使用HTML5 picture元素来完成，该元素不需要CSS来更改指定媒体查询上的img元素。如果您对此方法感兴趣，请注意browser support 不包含IE，但旧浏览器有polyfill。

＆＃13;

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

＆＃13;

Answer 3

您可以使用content属性插入图片。但是，包含这样的图像可能很难设计。（在调整浏览器大小之前全屏运行代码段）

@media screen and (max-width: 479px) {
    div img {
        display:none;
    }
    div::before {
        content: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66");
    }
}

<p>Resize this window to see image change</p>
<div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="200px" />
</div>

@media查询和图像交换

3 个答案:

或