Mozilla Firefox 上的纵横比

Question

在我的一个网站页面中，我想添加一张动态尺寸的图片。为此，我遵循了 W3school 的优秀教程：link

此方法在 Safari 和 Chrome 上完美运行；但是在 firefox 上给我一个错误..

分析容器尺寸，我觉得计算好像不一样..

首先，这里是 Chrome 和 Safari 方法：

红色块的宽度为 50%（相对于蓝色块）
红色方块的高度为40%（因为我们也以蓝色方块的宽度作为百分比计算的依据）

然后，在 firefox 中它给了我这个结果：

红色块的宽度为 50%（相对于蓝色块）
红色块的高度是蓝色块高度的 40%，而不是其父块宽度的 40%！

body {
  background-color: blue;
}

.home_box {
  margin: auto;
  margin-bottom: 40px;
  width: 90%;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19 */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  flex-direction: row;
}

#home_picture {
  width: 32%;
  height: 0px;
  padding-top: 18.1%;
  background-color: red;
  /*background: url('../Img/picture.jpg') no-repeat;
  background-size: contain;*/
}

.home_box p {
  width: 68%;
}

<div class="home_box">
  <div id="home_picture"></div>
  <p>Lorem ipsum</p>
</div>

你能帮忙解决这个问题吗？

Answer 1

可能是你的Firefox版本有问题。当我在 Firefox 72 上运行这段代码（根据你的略微调整并如下所示）时，我得到如下图所示的输出，与我在旧版 Microsoft Edge、基于 Chromium 的 Edge 和 Safari 中得到的输出相同。输出是否正确？

body{
  background-color: blue;
}
.home_box
{
    margin: auto;
    margin-bottom: 40px;
    width: 90%;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19 */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
    flex-direction: row;
}

#home_picture
{
    width: 32%;
    height: 0px;
    padding-top: 18.1%;
    background-color: red;
    background-size: contain;
}

.home_box p
{
    width: 68%;
}

<div class="home_box">
    <div id="home_picture"></div>
</div>

Mozilla Firefox 上的纵横比

Aspect ratio on Mozilla Firefox

html

css

aspect-ratio