css - Img-缩略图不保持纵横比

Question

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

我遇到的问题是缩略图没有正常的纵横比。此外，我正在使用具有特定大小 (50) 的图片来源的 gravatar 链接。

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

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，并在图像本身的任何类上添加了 height: 50px;，使图像在 Firefox 中显示为完美的正方形。