首页 文章

CSS维持给定高度的div宽高比

提问于
浏览 次
2

我找到了许多回答这个问题的答案 . 例如：Maintain the aspect ratio of a div with CSS

但如果我需要设置

div{
  position: absolute
  bottom: 10px;
  top: 10px;
  padding-right: 125%;
}

那些解决方案不起作用 .

当我将高度设置为如上时，如何保持div的纵横比？

javascript css html5

1 回答

  • 1

    这是使用视口单元的解决方案 . 根据您的受众，这可能是也可能不是最佳解决方案 . 有关详细信息，请参阅http://caniuse.com/#feat=viewport-units . 此外，根据您想要的宽高比，在某些情况下它会脱离屏幕 . 我的下一个建议是将JavaScript融入其中 .

    这是你可以尝试的小提琴：http://jsfiddle.net/Lq7v2gcq/

    而重要的代码：

    #vhtest {
    position: relative;
    top: 5vh;
    height: 90vh;
    width: 50vh;
    margin: 0 auto;
    border: 1px solid red;
}
    回复于

相关问题