Как изменить height у div'а при сворачивании окна браузера?

Question

[wweraw]

Подскажите пожалуйста , есть grid созданный с помощью bootstrap , при сворачивании браузера ширина уменьшается , а высота какой была такой и остается. Пробывал прописывать высоту и макс.высоту для разных divов в px, vh, % - результат один и тот же. Если на место .back_products вставить img , с ней всё отлично , меняет и ширину и высоту. С шириной такая же беда была , помогло max-width: 100% для .card и max-width: 100% для .back_products. Спасибо!

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
          <div class="card">
            <div class="back_products">
              <div class="back_square_new">NEW</div>
              <div class="square_product">
                <a href="" class="square"></a>
                <a href="" class="square"></a>
                <a href="" class="square"></a>
              </div>
            </div>
            <div class="card-body">
              <p class="card-text">Mustard Yellow Ruffle<br>White Shirt</p>
              <p class="price">250$</p>
              <div class="drop">
                <div class="add_bag_more">
                  <a href="" class="add_bag">ADD TO BAG</a>
                  <div class="cross"></div>
                  <a href="" class="more_info">MORE INFO</a>
                </div>
                <div class="add_wishlist_compare">
                  <a href="" class="add_wishlist">+ Add to Wishlist</a>
                  <a href="" class="add_compare">+ Add to Compare</a>
                </div>
              </div>
            </div>
          </div>
        </div>

.card {
  width: 271px;
  border: none;
  max-width: 100%;
}

.back_products {
  width: 270px;
  height: 351px; 
  background-color: gray;
  padding-top: 10px;
  position: relative;
  max-width: 100%;
}

Answer 1

[Pavel-ww]

Изменяйте высоту в каждой точке остановки через медиазапрос. Какие с этим трудности?
А когда контейнер переходит на ширину 100% (<575px) попробуйте единицы vw для высоты (но только зачем?)

@media (max-width: 1320px) {
    .back_products {
        height: 330px;
    }
}
@media (max-width: 1199px) {
    .back_products {
        height: 300px;
    }
}
@media (max-width: 991px) {
    .back_products {
        height: 250px;
    }
}
@media (max-width: 767px) {
    .back_products {
        height: 200px;
    }
}
@media (max-width: 575px) {
    .back_products {
        height: 30vw;
    }
}