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;。