Как задать размер картинок? Какие варианты вы используете в таких ситуациях?

Question

[Magnus Keef]

Всем привет. Вечная проблема... какаие могут быть варианты для выравнивания изображений?
Цель: чтобы картинка в каждом блоке имела одинаковый размер. (возможно обрезать по краям или что-то ещё)

таки html

<div class="row">
                <div class="model-card col-lg-4 col-6 mt-5">
                    <img src="img/model/model-cart-1.jpg" alt="">
                    <a class="model-like like-true"><i class="fas fa-heart"></i></a>
                    <h3 class="model-name">КЛАССИЧЕСКИЕ КУХНИ</h3>
                    <p class="model-description">Для изготовления фасадов модели "Берлин"
                        используется МДФ, облицованная шпоном
                        Yellow Pine (американской сосны) или
                        шпоном дуба, а декоративные элементы
                        изготавливаются из массива этих пород.
                    </p>
                    <strong class="model-price">Р Цена от 89 438 руб.</strong>
                </div>

                <div class="model-card col-lg-4 col-6 mt-5">
                    <img src="img/gallery-2pic.jpg" alt="">
                    <a class="model-like"><i class="fas fa-heart"></i></a>
                    <h3 class="model-name">КЛАССИЧЕСКИЕ КУХНИ</h3>
                    <p class="model-description">Для изготовления фасадов модели "Берлин"
                        используется МДФ, облицованная шпоном
                        Yellow Pine (американской сосны) или
                        шпоном дуба, а декоративные элементы
                        изготавливаются из массива этих пород.
                    </p>
                    <strong class="model-price">Р Цена от 89 438 руб.</strong>
                </div>
                
                <div class="model-card col-lg-4 col-6 mt-5">
                    <img src="img/model/model-cart-3.jpg" alt="">
                    <a class="model-like"><i class="fas fa-heart"></i></a>
                    <h3 class="model-name">КЛАССИЧЕСКИЕ КУХНИ</h3>
                    <p class="model-description">Для изготовления фасадов модели "Берлин"
                        используется МДФ, облицованная шпоном
                        Yellow Pine (американской сосны) или
                        шпоном дуба, а декоративные элементы
                        изготавливаются из массива этих пород.
                    </p>
                    <strong class="model-price">Р Цена от 89 438 руб.</strong>
                </div>
            </div>

це SCSS(ну почти css)

.model{
  margin-top: 20px;
  .model-card:nth-child(3n+2){
    border-left: 1px solid #898989;
    border-right: 1px solid #898989;
  }
  .model-card{
    img{
      width: 100%;
    }
    .model-like{
      display: block;
      text-align: right;
      i{
        color: #8A9191;
        cursor: pointer;
      }
    }
    .model-like:hover{
      i{color: #9b0000;}
    }
    .like-true{
      i{color: #e50000;}
    }
    .model-name{
      margin-top: 20px;
      font-size: 20px;
    }
    .model-description{
      font-size: 16px;
    }
    .model-price{
      font-size: 18px;
    }
  }
}

Comments

[Magnus Keef]

Мой вариант таков:

.model_card img{
min-width: 200px;
max-height: 100px;
}

Может кто подскажет более элегантный вариант?

Answer 1

[WapSter]