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的样子：

.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根据视口大小/比率选择性地加载图像）。有关详细信息，请参阅本页底部标题＆＃39; JavaScript图像替换＆＃39;：https://developers.google.com/web/fundamentals/media/images/images-in-markup?hl=en

Answer 2

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

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

2 个答案: