修复所有图像的大小

我使用引导程序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

修复所有图像的大小

回答

相关问题