Img-thumbnail не поддерживает соотношение сторон - PullRequest
Новая
       31

Img-thumbnail не поддерживает соотношение сторон

0 голосов
/ 12 марта 2019

Я пытаюсь создать таблицу с некоторыми пользовательскими данными, такими как изображение пользователя, электронная почта, возраст и т. Д.

Проблема, с которой я столкнулся, заключается в том, что уменьшенное изображение не имеет нормального соотношения сторон.Кроме того, я использую граватар-ссылку для источника изображения с определенным размером (50).

Вы можете увидеть проблему на рисунках, прикрепленных ниже.

ЭтоВот как это выглядит

Вот как я бы хотел, чтобы это выглядело

Вот код: 

<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.

Есть ли способ, которым это можно исправить?Без указания конкретной ширины и высоты?Любая помощь приветствуется.

Заранее спасибо!

1 Ответ

0 голосов
/ 12 марта 2019

Flexbox это проблема.Элемент div с классом media, обернутый вокруг элемента изображения, имеет display: flex, что повлияет на размеры дочерних элементов.Я использовал предоставленный вами jsfiddle и получил изображение для отображения в виде идеального квадрата в Firefox с добавлением height: 50px; для любого из классов на самом изображении.

...