HTML引导传送带响应图片

使用Bootstrap中的传送带时，显示如下：图像将调整大小，直到达到图片的自然图片大小。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作为类.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）

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

来源

2016-08-01 Informat

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

希望帮助！

来源

2016-08-01 22:40:19 Bishop

HTML引导传送带响应图片

回答

相关问题