HTML Bootstrap 轮播响应图片答案

【问题标题】：HTML Bootstrap Carousel Responsive PictureHTML Bootstrap 轮播响应图片
【发布时间】：2016-12-07 02:33:18
【问题描述】：

当使用 Bootstrap 中的轮播时：图片会调整大小，直到达到图片的自然图片大小。

<article class='image_content_container'>
  <div id='image_content_id' class='carousel slide image' data-ride='carousel'>
    <ol class="carousel-indicators">
      <li data-target="#image_content_id" data-slide-to="0" class="active"></li>
      <li data-target="#image_content_id" data-slide-to="1"></li>
      <li data-target="#image_content_id" data-slide-to="2"></li>
      <li data-target="#image_content_id" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active image_item">
        <img src="Images/A.jpg" alt="First slide">
      </div>
      <div class="item image_item">
        <img src="Images/B.jpg" alt="Second slide">
      </div>
      <div class="item image_item">
        <img src="Images/C.jpg" alt="Third slide">
      </div>
      <div class="item image_item">
        <img src="Images/D.jpg" alt="Fourth slide">
      </div>
    </div>
    <a class="left carousel-control" href="#image_content_id" role="button" data-slide="prev">
      <span class="icon-prev" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#image_content_id" role="button" data-slide="next">
      <span class="icon-next" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

为了提高响应速度，我尝试将所有 img 设为 .image-item 类并设置宽度：100%。图片仍然只调整大小，只要它没有达到它的自然大小。此外，我尝试使用而不是仅使用标签来查看是否可以在屏幕增大时将图像文件替换为更合适的文件。但是，这也不起作用：

...
<div class="carousel-inner role='listbox'>
    <div class="item active image_item">
        <picture>
            <Sources media="(min-width: 400px)" srcset="A-Large_1x.jpg 1x, A-Large_2x.jpg 2x">
            <img src="A-Small_1x.jpg" alt="First slide">
        </picture>
    ...
    </div>
</div>

简而言之，我正在尝试使此轮播具有响应性，以便 1）如果有必要，图像将缩放到大于自然尺寸（屏幕显着放大） 2) 如有必要，图片将替换为更高分辨率的图片（1x 或 2x） 3) 根据设备屏幕宽度（A-Small.jps、A-Medium.jpg、A-Large.jpg）显示相同图像的不同尺寸

轮播可以工作，但图像不会调整大小，也不会根据设备屏幕宽度显示适当版本的图像。你们有什么想法我可以解决这个问题吗？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

对于其他偶然发现此问题的人，让元素在引导轮播中工作的正确答案是下面的正确来源。

tldr; <Sources> 标签使用不正确，应该是<source>

第一个答案对于使图像具有响应性是正确的。

但是，如果您像我一样想要在访问者浏览器和浏览器大小（即移动设备与桌面设备）支持的引导轮播中提供优化的图像，那么您需要以下内容：

<picture>
    <source class="d-block w-100" media="(min-width: 768px;)" srcset="not-real.webp" type="image/webp">
    <source class="d-block w-100" srcset="not-real-2.webp" type="image/webp">
    <source class="d-block w-100" media="(min-width: 768px;)" srcset="not-real.jp2" type="image/jp2">
    <source class="d-block w-100" srcset="not-real-2.jp2" type="image/jp2">
    <img class="d-block w-100" src="not-real.jpg">
</picture>

这将让浏览器根据支持的文件类型（大多数为 webp，Safari 为 jp2000，IE8+ 的 jpeg 作为img 标签中的故障保护）提供优化的图像，并基于屏幕尺寸。

【讨论】：

【解决方案2】：

Bootstrap 为您提供了一个很棒的类，叫做 img-responsive。它将使任何图片响应。只需将类包含到每个 <img></img> 元素中。如果您想了解更多相关信息，请务必查看文档：http://getbootstrap.com/css/#images

   ....
   <div class="item image_item">
      <img src="Images/B.jpg" alt="Second slide" class="img-responsive">
   </div>
   ....

希望有帮助！

【讨论】：