HTML引導傳送帶響應圖片

Question

使用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）

輪播工作，但圖像不會調整大小，也不會根據設備屏幕寬度顯示適當版本的圖像。你們有什麼想法可以解決這個問題嗎？

Answer 1

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

希望幫助！