修復所有圖像的大小

我使用引導程序3創建用戶配置文件的頁面，並將它們顯示爲6行（在大屏幕上）。問題是，配置文件有不同大小的圖像，我試圖找出如何強制它們都是相同的高度和寬度，而不改變長寬比（裁剪圖像很好）。這裏有一個fiddle 修復所有圖像的大小

這是我到目前爲止有：

<div class="col-sm-2 thumb"> 
        <div class="card" border="1px;" style="width: 18rem;"> 
        <figure class="member"> 
    <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Annex_-_Stewart%2C_James_%28Call_Northside_777%29_01.jpg/220px-Annex_-_Stewart%2C_James_%28Call_Northside_777%29_01.jpg" height="150" alt="Card image cap"> 
    <figcaption class="member-details bordered no-top-border"> 
         <h3> 
         Jimmy Stewart 
         </h3> 
         <p>Actor</p> 

        </figcaption> 
        </figure> 
</div> 

       </div><!-- /.col -->

來源

2017-06-02 JulianJ

要獲得所有圖像相同的大小，我創建一個具有固定高度和/或寬度的div，然後將圖像設置爲背景圖像。使用背景大小：封面通常可以修復任何白色空白問題。 –

很多不同的方式來做到這一點，所以它真的取決於您的需求！我會選擇使用背景圖像的姜松鼠解決方案...如果圖像最終會變成動態，這可能會更多或者是一個問題 - https://jsfiddle.net/srdo03oj/3/ –

這可以用object-fit: cover;很容易做到，但是這個功能is not supported by IE/Edge。如果您需要IE支持 - 您可以嘗試使用background-size: cover;，它至少爲supported by the latest IE。

這是一個工作jsfiddle with both solutions。

來源

2017-06-02 09:47:34

您需要使用overflow: hidden風格。下面是一個例子，你的圖像將如何留在div元素：

https://jsfiddle.net/ajpofdzr/6/

來源

2017-06-02 09:05:06

這可能是有益的：Centre crop thumbnails with CSS

.thumbnail { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    overflow: hidden; 
} 
.thumbnail img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    height: 100%; 
    width: auto; 
    -webkit-transform: translate(-50%,-50%); 
     -ms-transform: translate(-50%,-50%); 
      transform: translate(-50%,-50%); 
} 
.thumbnail img.portrait { 
    width: 100%; 
    height: auto; 
}

來源

2017-06-02 09:14:30 Olezt

修復所有圖像的大小

回答

相關問題