HTML Bootstrap Carousel响应图片

时间:2016-08-01 21:38:54

标签: html css twitter-bootstrap

使用下面显示的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设为class .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)

轮播有效但图像不会调整大小,也不会根据设备屏幕宽度显示图像的相应版本。你们有什么想法解决这个问题吗?

2 个答案:

答案 0 :(得分:1)

Bootstrap为您提供了一个名为 img-responsive 的优秀课程。它会使任何图片响应。只需将该类包含在每个<img></img>元素中。如果您想了解更多相关信息,请务必查看文档:{​​{3}}

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

希望有所帮助!

答案 1 :(得分:0)

对于任何偶然发现此问题的人,使元素在引导轮播中工作的正确答案是下面的正确来源。

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标签中作为故障保险)提供优化的图像,屏幕尺寸。