使用下面显示的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)
轮播有效但图像不会调整大小,也不会根据设备屏幕宽度显示图像的相应版本。你们有什么想法解决这个问题吗?
答案 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
标签中作为故障保险)提供优化的图像,屏幕尺寸。