Как распределить содержимое в карточке товара?

Question

Мои попытки:

Взял карточку из bootstrap, загрузил изображения, но они оказались разного разрешения, соответственно карточки товаров получились разного размера.
Задал max-height для .card, но теперь текст (то есть, card-body) прилип к изображениям и не слушается padding-bottom и margin-bottom.
Применил с помощью id justify-content: spacebetween; к контейнеру card, нашёл и снял галочку flex c .card-body в просмотре кода, затем додумался задать flex: none; для card-body.
В результате card-body и картинки разошлись по низу картинка и текст, но теперь картинки, которые маловаты, находятся слишком высоко, да и блоки card-body по ходу повылазили за блок карточки .card.
Сделал для картинок, которые слишком малы, отдельные <div> контейнеры и вручную задал padding-top каждому, тогда удалось все выровнять.

Подскажите, пожалуйста, есть ли какие-то более универсальные способы работы с карточками и распределения контента внутри них?

Мой код:

body {
  background: linear-gradient(0deg, #d6d6d6 0%, #616161 100%);
}

.card {
  max-height: 31.5rem;
  min-height: 31.5rem;
}

.card-body {
  flex: none;
  padding-bottom: 1rem;
}

.card {
  justify-content: space-between;
}

.Laptop {
  padding-top: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.VR {
  padding-top: 4rem;
}

.GPU {
  padding-top: 6rem;
}

.nav-link {
  color: aquamarine;
}

.navbar-nav .nav-link.active {
  color: rgb(157, 157, 157);
}

.navbar-brand img {
  width: 40px;
}

.navbar-toggler {
  background-color: rgb(157, 157, 157);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <link rel="stylesheet" href="source/styles/mycss.css">

  <title>Document</title>

</head>

<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html"><img src="source/files/logo.png" alt="..."></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="index.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="pricing.html">Pricing</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <section>
    <div class="container-fluid mt-4">

      <div class="row">
        <div class="col-lg-1">

        </div>

        <div class="col-lg-8 col-md-12">
          <div class="row">
            <div class="col-lg-4 col-md-6 mt-4">
              <div class="card" id="cardd">
                <div class="Laptop">
                  <img src="source/images/Laptop.jpg" class="card-img-top" alt="Laptop">
                </div>
                <div class="card-body" id="cardbody">
                  <h5 class="card-title">Laptops</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
                  </p>
                  <a href="#" class="btn btn-primary">Go shopping</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-6 mt-4">
              <div class="card" id="cardd">
                <img src="source/images/Gaming PC.jpg" class="card-img-top" alt="Gaming PC">
                <div class="card-body">
                  <h5 class="card-title">Gaming PC</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
                  </p>
                  <a href="#" class="btn btn-primary">Go shopping</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-6 mt-4">
              <div class="card" id="cardd">
                <div class="VR">
                  <img src="source/images/VR1.jpg" class="card-img-top" alt="VR">
                </div>
                <div class="card-body">
                  <h5 class="card-title">VR</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
                  </p>
                  <a href="#" class="btn btn-primary">Go shopping</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-6 mt-4">
              <div class="card" id="cardd">
                <div class="GPU">
                  <img src="source/images/GPU.jpg" class="card-img-top" alt="GPU">
                </div>
                <div class="card-body">
                  <h5 class="card-title">GPU</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
                  </p>
                  <a href="#" class="btn btn-primary">Go shopping</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-6 mt-4">
              <div class="card" id="cardd">
                <img src="source/images/Gamepad.jpg" class="card-img-top" alt="Gamepad">
                <div class="card-body">
                  <h5 class="card-title">Gamepad</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
                  </p>
                  <a href="#" class="btn btn-primary">Go shopping</a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-6 mt-4">
              <div class="card" id="cardd">
                <img src="source/images/Monitor.jpg" class="card-img-top" alt="Monitor">
                <div class="card-body">
                  <h5 class="card-title">Monitor</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
                  </p>
                  <a href="#" class="btn btn-primary">Go shopping</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-12">
          <div class="row">
            <div class="col-lg-12">
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam, maxime, quo eum rem ipsa sapiente deserunt quos, voluptate voluptatibus vitae necessitatibus accusantium perspiciatis optio dolores omnis?
                <a href="#">Learn more>>></a></p>

            </div>
          </div>

        </div>
      </div>
    </div>
    </div>
  </section>

  <footer>

  </footer>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

Answer 1

Использовать изображение на задний фон background-image. В таком случае блок с изображением можно адаптивно настроить как душе угодно.
Использовать тег img, но изображения резать и держать в пропорциях
Использовать для card-img-top (самого изображения) значения высоты по типу height: 100%; max-height: 300px

*Это три способа, которые я использовал в разных ситуациях. Возможно с background-image и переборщил, но в целом задачу решило

БЛОГ НА HUSL

Как распределить содержимое в карточке товара?

Ответы (1 шт):