Img-缩略图不保持纵横比

Question

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

我遇到的问题是缩略图没有正常的纵横比。另外，我使用 gravatar link 作为图像的来源，具有一定的大小 (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 link 中找到问题和示例代码：https://jsfiddle.net/caw4qyk0/5/

我只能在 Firefox 中看到问题。

有没有办法解决这个问题？没有指定具体的宽度和高度？感谢任何帮助。

提前致谢！

Answer 1

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

Img-缩略图不保持纵横比

Img-thumbnail does not maintain aspect ratio

css

html

image

bootstrap-4

thumbnails