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

Question

我从轮播 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
等等

随着设备的变化或用户浏览器大小的变化，我想要 select 不同版本的 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>

如您所见，我已将图像注释掉，并添加了 div，class 值为 "testclass"。这就是 testclass 的样子：

.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 根据视口 size/ratio 选择性地加载图像）。有关这方面的更多信息，请参阅本页底部 'JavaScript Image Replacement' 标题下的内容：https://developers.google.com/web/fundamentals/media/images/images-in-markup?hl=en

Answer 2

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

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

Writing Media Queries to Selectively Load Images Depending on Screen Size

html

css

responsive-design

twitter-bootstrap