引导响应式照片网格在页面缩小时裁剪照片

Question

我很卡，我在一个反应应用程序中有一个 bootstrap 照片网格，为了让不同尺寸的照片显示相同的尺寸，我添加了一些样式修改。全屏一切看起来都不错，但现在网格响应不起作用。

const photoHeight = { width: '100%',objectFit: 'cover'}

const photoDiv = {height: '315px',width: '270px'} 

<div class="row">
   {this.state.employees.map(employee =>    
     <div class="col-sm-6 col-md-3">
        <div class="team-item text-center">
           <div class="team-avatar" style={photoDiv}>
             <img style={photoHeight} class="img-responsive" src={employee.photo} alt=""/>
           </div>
        </div>
     </div>
   )}
 </div>

正如您在下面的照片中看到的那样，当我缩小屏幕时照片宽度被裁剪了（高度很好我不想显示照片中的面孔）

Answer 1

img 标签里面不应该有一个class="img-fluid"吗？

引导响应式照片网格在页面缩小时裁剪照片

boostrap responsive photo grid cropping photos as page shrinks

responsive-design

twitter-bootstrap

react-bootstrap