如何在另一个 div 中保持 div 的纵横比

Question

所以我有一个 div，其中包含两个 divs 一个在另一个之上。我希望顶部的宽高比为4:5，宽度为 100%，因为它将包含该比例的图像，然后剩余高度转到第二个 div。

这是我能走的最远了

你可以找到所有的代码here

注意：我希望在用户缩小屏幕尺寸时保持该纵横比，尝试缩小沙盒示例中的宽度以查看

&_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

试试这个：

.Recommendations_container_recomendation{

  display:flex;

}

Answer 2

Flex 可以在这里真正为您提供帮助。我附上了您要实现的目标的简化版本。

这只是几行 CSS。希望能帮助到你。

如果您更改框的height，您会看到它保持该比率。 想法是在盒子内，每个项目都有一个flex 值。因此，所有值的总和然后除以单个 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

我通过计算填充顶部的比率而不是高度来解决这个问题

fixed here

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