img-thumbnail 不保持纵横比

Question

我正在尝试创建一个包含一些用户详细信息的表格，例如用户图片、电子邮件、年龄等。

我遇到的问题是缩略图图像没有正常的纵横比。另外，我正在使用 gravatar 链接作为图像的来源，具有一定的大小（50）。

您可以在下面的图片中看到问题。

This is how it's looking like

This is how I would like it to look like

代码如下：

<div class="container">
<main id="main" class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
       <table class="table table-responsive">
           <thead>
             <th>Picture</th>
             <th>Other info</th>
           </thead>
           <tbody>
             <tr>
               <td>
                 <div class="media">
                   <img class="d-flex mr-3 img-thumbnail" src="http://www.gravatar.com/avatar/?d=identicon&s=50">
                 </div>
               </td>
               <td>
                 Other info (email, age, username etc.)
               </td>
             </tr>
           </tbody>
       </table>
    </div>
  </div>
</main>           
</div>

您可以在这个 JSfiddle 链接中找到问题和示例代码：https://jsfiddle.net/caw4qyk0/5/

我只能在 Firefox 中看到问题。

有没有办法解决这个问题？没有指定特定的宽度和高度？ 任何帮助表示赞赏。

提前谢谢你！

Answer 1

Flexbox 是个问题。包裹在图像元素周围的具有media 类的div 具有display: flex，这将对子元素的尺寸产生影响。我使用了您提供的 jsfiddle，并在 Firefox 中将图像显示为完美的正方形，并在图像本身的任何类上添加了 height: 50px;。