文章/答案/技术大牛

发布

社区首页 >问答首页 >不带js的固定长宽比和固定高度的元素

问不带js的固定长宽比和固定高度的元素
EN

Stack Overflow用户

提问于 2018-03-28 18:16:30

回答 2查看 59关注 0票数 0

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

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

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

css

html

回答 2

Stack Overflow用户

发布于 2018-03-28 19:44:25

据我所知，你可以尝试另一个css特性的视窗高度。通过这样的给予：

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

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

票数 0

Stack Overflow用户

发布于 2018-03-28 20:05:24

实际上，这可以通过媒体查询和“宽高比”来实现。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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49531859

复制

相似问题

问不带js的固定长宽比和固定高度的元素
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不带js的固定长宽比和固定高度的元素EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不带js的固定长宽比和固定高度的元素
EN