如何使圖像響應Bootstrap？

我正在建立一個網站，列出一些待售的建築物的圖片和小說明。因爲我想讓網站響應，我正在嘗試使用Bootstrap3網格系統。如何使圖像響應Bootstrap？

所以當前的HTML我有如下（running code here on bootply）：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8"> 
      <article class="row property-ad"> 
       <div class="col-sm-4"> 
        <img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg"> 
       </div> 
       <div class="col-sm-8"> 
        <div class="property-ad-title">Nice building</div> 
        <div class="property-ad-description">and some describing text here</div> 
       </div> 
      </article> 
     </div> 
     <div class="col-sm-4"> 
      <div class="right-side-ad"> 
       some advertisement is going here 
      </div> 
     </div> 
    </div> 
</div>

的問題是，標題和描述只是一個大的（lg）屏幕上正確顯示。然而，在md或sm屏幕上，標題和說明部分顯示在圖像頂部，因爲圖像看起來比其容器大。我試圖給圖像一個max-width: inherit;，但這似乎沒有做任何事情。

接下來，我不知道如何給它一個適當的最大寬度，主要的問題似乎是，我真的不知道我會想要什麼樣的行爲。因爲如果圖像的寬度變大了，它會變得扭曲，或者它也需要改變它的高度。但是，如果高度發生變化，其旁邊的文字可能會比圖片更高，這也會使版面顯得雜亂無章。

所以我的主要問題;

在處理文本旁邊的圖像時，使網站響應的典型期望行爲是什麼？
我將如何實現？

歡迎所有提示！

來源

2014-12-02 kramer65

不要用你的custome類的IMG剛纔添加的bootstrap class for responsive images

IMG響應

<div class="col-sm-4"> 
    <img class="img-responsive" src=".....jpg"> 
</div>

入住這Bootply

來源

2014-12-02 17:02:25 DaniP

簡單地說：Bootstrap的類別爲img-responsive，或者您可以將max-width: 100%設置爲img標籤。

來源

2014-12-02 17:02:00 DRC

如何使圖像響應Bootstrap？

回答

相關問題