使圖像具有相同的尺寸在自舉網格

我建立圖庫與3行，每行通過使用自舉網格系統含有3個圖像。所有的圖像都有不同的大小。我想要做的是使所有的圖像相同的大小。我試圖在我的CSS中使用最大高度或最大寬度，但它沒有幫助使所有的圖像（縮略圖）相似的大小。我應該只是獲得縮略圖類的鑽井平臺還是有另一種解決方案？使圖像具有相同的尺寸在自舉網格

body { 
 
     padding-top: 70px;} 
 
    .row .flex { 
 
    display: inline-flex; 
 
    width: 100%;} 
 
    img { 
 
    width:100%; 
 
    min-height:100px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row match-to-row"> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/eKTUtA74uN0" alt=""> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/x-tbVqkfQCU" alt=""> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/cjpGSEkXfwM" alt=""> 
 
     </div> 
 
     </div> 
 

 
     <div class="row match-to-row"> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/63JKK67yGUE" alt=""> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt=""> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/NqE8Ral8eCE" alt=""> 
 
      </div> 
 
     </div> 
 

 
     <div class="row flex match-to-row"> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/6oUsyeYXgTg" alt=""> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/WF2lvywxdMM" alt=""> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/2FdIvx7sy3U" alt=""> 
 
      </div> 
 
      </div> 
 
    </div> 
 
    </div>

來源

2017-07-28 Jacob Murin

如果所有的圖像是不同的大小，那麼他們就會如果你讓他們都具有相同的高度和寬度變得扭曲。你需要決定你是否希望它們的寬度相同，或者高度相同。 – ZimSystem

正如我所看到的那裏有3 phothos y las row –

你知道使用flex的boostrap4嗎？ https://v4-alpha.getbootstrap.com/utilities/flexbox/因爲你要使用柔性:) –

添加CSS類IMG-響應每一個形象。

來源

2017-07-28 18:02:55

只是修改此：

img { 
    width: 100px; // how much you want 
    min-height: 100px; 
    float: left; 
    margin: 10px; 
}

來源

2017-07-28 18:04:57 Shark

我認爲你正在尋找的屬性是object-fit

img { 
    width: 200px; /* You can set the dimensions to whatever you want */ 
    height: 200px; 
    object-fit: cover; 
}

的object-fit物業的工作方式類似於你將如何使用background-size: cover背景圖像上，使它無需拉伸即可填充頁面。這樣，您可以在規則中定義一個寬度，所有圖片都將遵循以確保它們的大小相同，而不會扭曲圖片。

你可以用這個屬性使用其他值包括：

fill - 伸展的形象。
contain - 保留圖像的縱橫比。
cover - 填寫框的高度和寬度。
none - 維持原有的規模。
scale-down - 比較無之間的差異，幷包含找到的最小物體的大小。

object-fit | CSS-Tricks

來源

2017-07-28 18:23:21 natejms

使圖像具有相同的尺寸在自舉網格

回答

相關問題