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

Question

Верстаю страницу - https://fls.guru/www/youyom/Bentley/ , в макете присутствуют карточки, я их сверстал, но при добавления контента ломается структура, изображение меняет свои размеры.

Код html:

                ```<section class="news-model">
                <div class="another__menu">
                    <div class="another__menu-content _container">
                        <h2 class="another__title">Новинки</h2>
                        <div class="another__logo-cont">
                            <a href="#main-block" class="logo__image-to _goto-block">
                                <img src="img/logo/Bentley-Logo-Back.svg" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="news-model__content _container">
                    <div class="news-model__item">
                        <div class="news-model__img _ibg"><img src="img/models/section___model_1.png" alt=""></div>
                        <div class="news-model__body">
                            <h2 class="news-model__title">Mulsanne Extended Wheelbase</h2>
                            <div class="news-model__text">1965 року з’являється модель Bentley Т, і марка виходить з тіні
                                «Rolls-Royce». Цей успіх через п’ять років підтверджує
                                нові Bentley Mulsanne Turbo і Bentley Mulsanne Turbo R, які визнають найкращими седанами у
                                своєму класі у світі…</div>
                            <a href="" class="news-model__link">Дізнатися більше</a>
                        </div>
                        <div class="news-model__city">Bentley в Україні</div>

                    </div>
                    <div class="news-model__item">
                        <div class="news-model__img _ibg"><img src="img/models/section__model_2.png" alt=""></div>
                        <div class="news-model__body">
                            <h2 class="news-model__title">Mulsanne Extended Wheelbase</h2>
                            <div class="news-model__text">1965 року з’являється модель Bentley Т, і марка виходить з тіні
                                «Rolls-Royce». Цей успіх через п’ять років підтверджує
                                нові Bentley Mulsanne Turbo і Bentley Mulsanne Turbo R, які визнають найкращими седанами у
                                своєму класі у світі...</div>
                            <a href="" class="news-model__link">Дізнатися більше</a>
                        </div>
                        <div class="news-model__city">Bentley в Україні</div>

                    </div>
                    <div class="news-model__item">
                        <div class="news-model__img _ibg"><img src="img/models/section__model_3.png" alt=""></div>
                        <div class="news-model__body">
                            <h2 class="news-model__title">Mulsanne Extended Wheelbase</h2>
                            <div class="news-model__text">1965 року з’являється модель Bentley Т, і марка виходить з тіні
                                «Rolls-Royce». Цей успіх через п’ять років підтверджує
                                нові Bentley Mulsanne Turbo і Bentley Mulsanne Turbo R, які визнають найкращими седанами у
                                своєму класі у світі…</div>
                            <a href="" class="news-model__link">Дізнатися більше</a>
                        </div>
                        <div class="news-model__city">Bentley в Україні</div>

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

Код css(scss) :

 
._ibg {
    img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
    }
}
.news-model {
    color: #fff;
    padding: 100px 0 50px 0;
        &__content {
            padding-top: 150px;
            display: flex;
            @media (max-width: $md2+px){
                    flex-direction: column;
            }
        }

        &__item {
            position: relative;
            flex: 0 1 33.333%;
            cursor: pointer;
            margin-right: 30px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            height: 760px;
            transition: 0.4s;
                &:last-child {
                    margin: 0;
                }
                &:hover {
                    border: 1px solid #000000;
                    filter: drop-shadow(0px 25px 25px rgba(57, 68, 84, 0.25));
                    .news-model__body {
                        background-color: transparent;
                        color: #fff;

                        .news-model__title {
                            color: #fff;
                        }
                        a {
                            color: #fff;
                        }
                    }
                    .news-model__img {
                        img {
                                min-height: 120%;
                            }
                        }
                    }
                
                @media (max-width: $md2+px){
                    flex: 0 1 100%;
                }
            }
        

        &__img {
            position: relative;
            width: 100%;
            height: 100%;
            transition: 0.4s;
            @media (max-width: $md2+px){
                    min-height: 500px;
            }
            img {
                height: 200%;

            }
        }

        &__body {
            position: relative;
            z-index: 2;
            font-size: 20px;
            line-height: 35px;
            /* or 175% */
            color: #000000;
            padding: 20px;
            transition: 0.6s;
            width: 100%;
            background-color: #fff;
        }

        &__title {
            font-size: 25px;
            line-height: 31px;
            /* identical to box height */
            color: #000000;
            font-weight: 700;
            margin-bottom: 20px;
            transition: 0.4s;
        }

        &__text {
            margin-bottom: 20px;
            overflow: hidden;

        }

        &__link {
            font-size: 20px;
            line-height: 25px;
            /* identical to box height, or 125% */

            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: #4A4A4A;
            padding-bottom: 10px;
            border-bottom: 1px solid #ccc;
            transition: 0.4s;
        }

        &__city {
            position: relative;
            z-index: 2;
            font-size: 20px;
            line-height: 25px;
            /* identical to box height, or 125% */
            color: #4A4A4A;
            padding: 10px 20px;
            background-color: #fff;
            position: absolute;
            left: 30px;
            top: 30px;
        }
}

Класс ibg - то некая функция которая делает изображение html фоном

Answer 1

Я бы сверстал их так.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem 3rem;
}

.grid-item {
  display: block;
  min-width: 300px;
  width: 100%;
  box-shadow: 0 10px 10px -5px rgba(0,0,0,0);
  overflow: hidden;
  position: relative;
  padding-top: 10rem;
  transition: box-shadow .2s linear;
}

.grid-item::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #7b48f1;
  opacity: 0;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity .2s linear;
}

.grid-item__cat {
  display: inline-block;
  background: #fff;
  padding: .5em;
  box-sizing: border-box;
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 3;
  font-weight: bold;
}

.grid-item__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-10rem);
  transition: transform .2s linear;
}

.grid-item__info {
  display: block;
  width: 100%;
  padding: 2rem 1rem 0;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  transition: color .2s linear;
}

.grid-item__info::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  transform: translateY(0);
  transition: transform .2s linear;
}

.grid-item__wrap {
  position: relative;
  z-index: 2;
  transform: translateY(0);
  transition: transform .2s linear;
}

.grid-item__link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none !important;
  padding-bottom: .5em;
  border-bottom: 1px solid rgba(0,0,0,.35);
  transition: border-color .2s linear;
}

.grid-item:hover {
  box-shadow: 0 10px 10px -5px rgba(0,0,0,.35);
}

.grid-item:hover::after {
  opacity: 1;
}

.grid-item:hover .grid-item__img {
  transform: translateY(0);
}

.grid-item:hover .grid-item__wrap {
  transform: translateY(-1rem);
}

.grid-item:hover .grid-item__info {
  color: #fff;
}

.grid-item:hover .grid-item__info::before {
  transform: translateY(100%);
}

.grid-item:hover .grid-item__link {
  border-color: rgba(255,255,255,.35);
}

<div class="grid">
  <div class="grid-item">
    <div class="grid-item__cat">Bentley в Україні</div>
    <img class="grid-item__img" src="//i.imgur.com/iq8Vds2.png">
    <div class="grid-item__info">
      <div class="grid-item__wrap">
        <h2 class="grid-item__title">Mulsanne Extended Wheelbase</h2>
        <p class="grid-item__des">1965 року з’являється модель Bentley Т, і марка виходить з тіні «Rolls-Royce». Цей успіх через п’ять років підтверджує нові Bentley Mulsanne Turbo і Bentley Mulsanne Turbo R, які визнають найкращими седанами у своєму класі у світі…</p>
        <a class="grid-item__link" href="#">Дізнатися більше</a>
      </div>
    </div>
  </div>
  
  <div class="grid-item">
    <div class="grid-item__cat">Bentley в Україні</div>
    <img class="grid-item__img" src="//i.imgur.com/Zf6pCxR.png">
    <div class="grid-item__info">
      <div class="grid-item__wrap">
        <h2 class="grid-item__title">Mulsanne Extended Wheelbase</h2>
        <p class="grid-item__des">1965 року з’являється модель Bentley Т, і марка виходить з тіні «Rolls-Royce». Цей успіх через п’ять років підтверджує нові Bentley Mulsanne Turbo і Bentley Mulsanne Turbo R, які визнають найкращими седанами у своєму класі у світі…</p>
        <a class="grid-item__link" href="#">Дізнатися більше</a>
      </div>
    </div>
  </div>
  
  <div class="grid-item">
    <div class="grid-item__cat">Bentley в Україні</div>
    <img class="grid-item__img" src="//i.imgur.com/m05sITJ.png">
    <div class="grid-item__info">
      <div class="grid-item__wrap">
        <h2 class="grid-item__title">Mulsanne Extended Wheelbase</h2>
        <p class="grid-item__des">1965 року з’являється модель Bentley Т, і марка виходить з тіні «Rolls-Royce». Цей успіх через п’ять років підтверджує нові Bentley Mulsanne Turbo і Bentley Mulsanne Turbo R, які визнають найкращими седанами у своєму класі у світі…</p>
        <a class="grid-item__link" href="#">Дізнатися більше</a>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

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

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