html - 编写媒体查询以根据屏幕尺寸有选择地加载图像

Question

我从 carousel bootstrap 模板中获得了以下代码:

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

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

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