Как сохранить соотношение сторон div внутри другого div

Question

Итак, у меня есть div, который содержит два divs один поверх другого. Я хочу, чтобы верхняя часть имела соотношение сторон 4:5 со 100% шириной, так как она будет содержать изображение с этим соотношением, а затем оставшаяся высота перейдет ко второму div.

Это как далеко я мог go

Вы можете найти весь код здесь

примечание: я буду sh поддерживать это соотношение сторон, когда пользователь уменьшает размер экрана , попробуйте уменьшить ширину в примере песочницы, чтобы увидеть

&_product{
                    overflow: hidden;
                    padding-top: 800.34px / 591.44px * 100%;
                    background: rgb(207, 206, 206);
                    position: relative;
                    max-width: 232px;
                    // max-height: 317.313px;
                    &_inside {
                      display: grid;
                      // grid-template-columns: 1fr 
                      // grid-template-rows: 1fr 80px;;
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                    }

                    border: 1px solid rgb(131, 72, 72);
                    position:relative;
                    width:100%;
                    height:fit-content;
                    box-shadow: 0 5px 15px rgba(0,0,0,.25);
                    overflow:hidden;
                    &_imgbox{
                      height: 100% ;
                      border: 1px solid red;
                      box-sizing:border-box;
                      position: relative;
                      // img{
                      //   width:100%;
                      //   display:block;
                      //   margin:0;
                      // }
                      &_aspect {
                        position: absolute;
                        width: 100%;
                        height: 5px/4px*100%;   // My attempted calculation
                        background: blue;
                        top: 0;
                        // left: 0;


                      }
                  }
                }

html

    <div class="Recommendations_container_recomendation_box_product">
                            <div class="Recommendations_container_recomendation_box_product_inside">
                                <div class="Recommendations_container_recomendation_box_product_imgbox">
                                    <div class="Recommendations_container_recomendation_box_product_imgbox_aspect">

                                        {/* <img src="https://images.sportsdirect.com/images/products/62310640_l.jpg" /> */}
                                    </div>

                                </div>
                                <div class="Recommendations_container_recomendation_box_details">
                                    <div class="Recommendations_container_recomendation_box_details_price">$55.99</div>
                                    <h2>Brand Name<br /><span>Mens Designer T-shirt</span></h2>


                                </div>
                            </div>

                        </div>

Answer 1

Я исправил это, вычислив коэффициент заполнения сверху вместо высоты

исправлено здесь

padding-top: height: 5px/4px * 100%;

Answer 2

Flex действительно может вам здесь помочь. Я приложил упрощенную версию того, чего вы пытаетесь достичь.

Это всего несколько строк CSS. Надеюсь, поможет.

Если вы измените heigh t поля, вы увидите, что соотношение сохраняется. Идея заключается в том, что внутри коробки каждый элемент имеет значение flex. Таким образом, сумма всех значений затем делится на индивидуальное значение гибкости, чтобы определить соотношение.

.box {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 300px;
  border: 1px solid black;
}

.four-fifth {
  flex: 4;
  background-color: red;
}

.remaining-height {
  flex: 1;
  background-color: green;
}

<div class="box">
    <div class="four-fifth">
        Content
    </div>
    <div class="remaining-height">
        Additional content
    </div>
</div>

Answer 3

Попробуйте следующее:

.Recommendations_container_recomendation{

  display:flex;

}