基于父母身高的CSS平方

Question

我目前正在开发一个网站，希望图像达到其父高的25％。

我在SO上查看了以下答案，并在其他站点上查看了一些其他类似的答案：

• CSS square based on height
• Css div responsive square dependent on height
• https://css-tricks.com/aspect-ratio-boxes/

上述答案的问题是它要么使用视口单位（vh），要么是基于宽度的纵横比。就我而言，我想将元素设置为其父高的25％。我尝试了下面的代码，但是它只是将其宽度设置为100％。

main {
    --main-height: calc(100vh - var(--nav-height) - var(--body-top-padding)); 
    min-height: var(--main-height);
}

section {
    border: 1px solid red;
    width: 100%;
    min-height: calc(var(--main-height) / 2);
}
#profile > img {
    border: 1px solid black;
    height: 25%;
    padding-left: 100%;
}

这里，＃profile是一个ID为个人资料的部分。

编辑

这是我想做的事情：

#profile > img {
    border: 1px solid black;
    --width: calc(0.25 * var(--main-height));
    min-height: var(--width);
    width: var(--width);
}

有没有不使用CSS属性和计算的更好的方法？

Answer 1

根据给定的细节，这应该足够了：

.parent {
  height: 300px;
  width: 300px;
  border: 1px solid black;
}

.parent img {
  height: 25%;
  width: auto;
}

<div class="parent">
  <img src="https://visualhunt.com/photos/2/cat-feline-cute-domestic-young-looking-curious.jpg?s=s" />
</div>

尽管，我应该提到一些CSS限制：

• CSS相对高度和宽度（％）只能从确定的值中得出。意味着只有当父级具有not相对高度时，才可以将子级设置为相对高度，宽度也要设置为相对高度。
• 不建议调整图像大小，因此只需设置其中一个属性并让另一个auto自动确定其比例即可。

一种简单的查看方法是采用此代码段并将父级的高度值更改为其他值，然后查看图像受到的影响。

如果父级的高度不是通过CSS定义的，则可以使用DOM“入侵”此功能。

setTimeout(() => {
  let parent = document.getElementById('parent');
  let image = document.querySelector('#parent img');
  
  let parentHeight = parent.offsetHeight;
  image.style.height = (parentHeight / 4) + 'px';
}, 2000);
#parent {
  height: 50%;
  width: 50%;
}

#parent img {
  height: 25%;
  width: auto;
}
<div id="parent">
  <img src="https://visualhunt.com/photos/2/cat-feline-cute-domestic-young-looking-curious.jpg?s=s" />
</div>

我不会称它为完美的示例，因为老实说，在此摘要功能中很难模拟一个未知的高度容器-但为了使示例可见，我将其延迟了2秒。