Размер карты различается из-за высоты изображения?

Question

Я создал дизайн для пользователей, чтобы выбрать различные шаблоны. Все функции работают нормально, но у меня есть проблема с дизайном моей карты из-за разного размера изображения.

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

Вот мой текущий экран:

">

Answer 1

Работает нормально, фиксируя все изображения одинаковой высоты и ширины.

Answer 2

Решение:

Используя object-fit: contain; вместе с некоторыми спецификациями c height (что соответствует вашему дизайну), мы сможем установить изображения всех размеров в контейнере

body {
    margin: 10px;
}
img{  
      object-fit: contain;
      height: 60px;
      width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
         <img width="100" height="100" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
        </div>
        <div class="col-md-4" style="background-color: yellow">
          <img width="100" height="100" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        </div>
        <div class="col-md-4" style="background-color: green">
         <img width="100" height="100" src="https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
        </div>
    </div>
</div>