Question

我需要在我的应用程序中设置其中一个容器的样式，使其具有固定的宽高比，并根据视口宽度填充宽度或高度的外部容器。填充宽度与设置

一样简单

#myDiv{
  width:100%;
  padding-bottom: 50%
}

似乎没有任何明显的方法可以将高度设置为100％，然后将填充保留为200％。如果不使用js中的边界框，这是否可行？

Answer 1

根据我的理解，你可以尝试视口高度另一个css proeprty。通过这样给出：

#mydiv{
width:100%;
height:100vh;
}

vh表示将覆盖容器t0视口高度的视口高度。

Answer 2

实际上，这可以通过媒体查询和＆＃34;宽高比＆＃34;来实现。 MDN表示它不支持chrome，但它必须过时，它才有效。

https://codepen.io/anon/pen/zWpmYK

#a4{
  background: #f00;
  width:100%;
  padding-bottom: 141%;
}
@media (min-aspect-ratio: 21/29) {
  #a4{
    background: #0f0;
    height: 98vh;
    padding-bottom: 0;
    width: 69vh;
  }
}

https://developer.mozilla.org/fr/docs/Web/CSS/@media/aspect-ratio

具有固定纵横比和固定高度而没有js的元素

2 个答案: