编写媒体查询以根据屏幕大小选择性加载图像

Question

我有来自转盘引导模板的以下代码：

 64     <!-- Carousel
 65     ================================================== -->
 66     <div id="myCarousel" class="carousel slide" data-ride="carousel">
 67       <!-- Indicators -->
 68       <ol class="carousel-indicators">
 69         <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 70         <li data-target="#myCarousel" data-slide-to="1"></li>
 71         <li data-target="#myCarousel" data-slide-to="2"></li>
 72       </ol>
 73       <div class="carousel-inner">
 74         <div class="item active">
 75           <img src="assets/images/outside/lake2.jpg" width="100%" height="300px" alt="">
 76           <div class="container">
 77             <div class="carousel-caption">
 78               <h1>escape the city</h1>
 79               <p></p>
 80               <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">Inquire today</a></p>-->
 81             </div>
 82           </div>
 83         </div>
 84         <div class="item">
 85           <img src="assets/images/outside/dock1.jpg" width="100%" height="300px" alt="">
 86           <div class="container">
 87             <div class="carousel-caption">
 88               <h1>sit back and relax</h1>
 89               <p></p>
 90               <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>-->
 91             </div>
 92           </div>
 93         </div>
 94         <div class="item">
 95           <img src="assets/images/outside/front2.jpg" width="100%" height="300px" alt="">
 96           <div class="container">
 97             <div class="carousel-caption">
 98               <h1>Welcome to the test site</h1>
 99               <p></p>
100               <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">push me</a></p>-->
101             </div>
102           </div>
103         </div>
104       </div>
105       <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class=    "glyphicon glyphicon-chevron-left"></span></a>
106       <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class    ="glyphicon glyphicon-chevron-right"></span></a>
107     </div><!-- /.carousel -->

我想知道如何创建一个单独的css，允许我进行媒体查询，并根据设备的大小，将上面代码中引用的图像更改为更小/更大的图像，具体取决于需要。例如，我使用图像：

<img src="assets/images/outside/dock1.jpg" width="100%" height="300px" alt="">

我正计划创建该图像的几个版本，如下所示：

• dock1_400px.jpg
• dock1_600px.jpg
• 等等

随着设备的变化或用户更改浏览器的大小，我想选择不同版本的dock1.jpg文件。

如有任何建议，我们将不胜感激。或者，如果有一种更简单的方法可以做到这一点，而不必为每个图像创建多个文件，我想知道。谢谢

编辑1

我试图更改其中一个图像的代码作为测试。。。像这样：

 94         <div class="item"><div class="testclass"></div>
 95           <!--<img src="assets/images/outside/front2.jpg" width="100%" height="300px" alt="">-->
 96           <div class="container">
 97             <div class="carousel-caption">
 98               <h1>Welcome to the test site</h1>
 99               <p></p>
100               <!--<p><a class="btn btn-lg btn-primary" href="#" role="button">push me</a></p>-->
101             </div>
102           </div>
103         </div>

正如您所看到的，我已经注释掉了图像，并添加了一个类值为"testclass"的div。这就是测试类的样子：

.testclass{
  height: 100%;
  background-image: url(assets/images/outside/front2.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

但这似乎不起作用。没有显示任何图像。正在检查F12开发人员工具，看看我能找到什么。。。

Answer 1

这里有一篇有趣的文章与您的问题有关：

https://developers.google.com/web/fundamentals/media/images/images-in-css?hl=en

这里有一个例子：

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}
@media (min-width: 500px) {
  .example {
    background-image: url(large.png);
  }
}

此示例将在宽度大于500px的屏幕上加载large.png图像。

您可以使用JavaScript执行类似的操作（可以使用JavaScript根据视口大小/比例选择性地加载图像）。有关此方面的更多信息，请参阅本页底部"JavaScript图像替换"标题下的内容：https://developers.google.com/web/fundamentals/media/images/images-in-markup?hl=en

Answer 2

如果您想根据视口大小更改图像，我建议您使用JavaScript。或者你也可以使用srcset，但你可能需要polyfill。