使圖像適合容器

我試圖使用引導網格系統的每個行都有4列包含圖像，但圖像大小很大，它獲取其容器，所以我設置圖像位置：絕對和div位置：相對但它仍然無法正常工作。有沒有辦法讓圖像適合容器尺寸的div容器？使圖像適合容器

HTML：

<div class="container"> 
     <div class="row"> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f1.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f2.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f3.jpg" alt="f1"> 
      </div> 
      <div class="col-md-3 sec5row"> 
       <img class="filter" src="resources/images/f4.jpg" alt="f1"> 
      </div> 
    </div> 
<div>

CSS：

.sec5row { 
     border : 1px solid red; 
     position: relative; 
    } 
    .filter { 
     position: absolute; 
    }

來源

2016-07-12 pexichdu

只需使用IMG {寬度：100％} –

IMG {最大寬度：100％;}可能會工作。或者甚至可能是img {width：100％;}，如果你想要100％的時候。 – RMo

或者甚至可以更好地添加引導類img響應圖像（假設您使用基於創建列的方式引導）。 – RMo

添加CSS的代碼

#img { 
    width: 100px;//change px size 
    height: 100px;//change px size 
    padding-left: 3px; 
    padding-top: 5px; 
}

來源

2016-07-12 07:51:38 Ranjan

爲什麼#img ??對於img標籤 –

沒有ID做一個簡單的id =「」它它不會影響任何東西。 – Ranjan

或使用類如「.filter」 – Ranjan

您可以使用下面的代碼以適應響應格內圖像

.filter { 
    width:100%;/*To occupy image full width of the container and also fit inside the container*/ 
    max-width:100%/*To fit inside the container alone with natural size of the image ,Use either of these width or max-width based on your need*/ 
    height:auto; 
    }

來源

2016-07-12 07:52:49 bubesh

你能告訴我爲什麼身高：auto？對不起，我很新。 – pexichdu

@pexichdu爲了保持基於寬度的圖像的縱橫比，否則圖像看起來會拉長，因爲我們已經將寬度設爲100％ – bubesh

我認爲引導類「.img-responsive」解決了你的問題。因此，嘗試這樣的事情：

<div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f1.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f2.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f3.jpg" alt="f1"> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <img class="img-responsive" src="resources/images/f4.jpg" alt="f1"> 
 
      </div> 
 
    </div> 
 
<div>

它設置你的圖像的風格「最大寬度：100％;」和「height：auto;」這應該正是你所需要的。應該不需要任何額外的CSS。

來源

2016-07-12 07:55:21 Jabalaja

只需添加類= 「IMG響應」到你的img標籤...它工作正常

來源

2016-07-20 10:49:06

使圖像適合容器

回答

相關問題