HTML引导旋转木马响应图片

当使用下图所示的引导转盘时：图像将调整大小，直到达到图片的自然图片大小

<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设置为类。图像项和设置宽度：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>

。。。
Bootstrap为您提供了一个名为img responsive的优秀类。它将使任何图片都具有响应性。只需将类包含到每个

....

希望有帮助
 对于其他偶然发现这一点的人来说，让元素在引导转盘中工作的正确答案是下面的正确来源

tldr；
标记使用不正确，应该是

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

但是，如果您和我一样，希望在访客浏览器和浏览器大小（即移动与桌面）支持的引导转盘中提供优化的图像，那么您需要以下内容：

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



这将允许浏览器根据支持的文件类型（webp用于most，jp2000用于Safari，jpeg用于IE8+作为
img
标记中的故障保护）和屏幕大小提供优化图像

<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>