Question

下面的例子有一个带有子橙色div（#inner）的灰色div（#outer）。 #inner将仅按宽度按比例填充页面。是否可以仅使用CSS，根据宽度和高度按比例缩放#inner比例？请不要使用Javascript解决方案，因为我知道如何完成该路由，但如果可能的话，更喜欢CSS解决方案。

http://jsfiddle.net/Gchr4/

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#outer {
    background-color: #EFEFEF;
    width: 100%;
    height: 100%;
}

#inner {
    background-color: #ff9933;
    width: 100%;
    padding-top: 50%;
}

HTML

<div id="outer">
    <div id="inner"></div>
</div>

我试图实现的Javascript示例：http://jsfiddle.net/Q4Qdy/

Answer 1

height:100%使用#inner。但是，由于你的填充，高度将增加50％。这将通过使用box-sizing:border-box来解决，但这仍然存在一些浏览器问题。因此，如果您不必添加填充，我建议将其删除。

working example

#inner {
    background-color: #ff9933;
    width: 100%; height: 100%;
    padding-top: 50%;
    box-sizing: border-box;
}

Answer 2

可以使用媒体查询（特别是min-aspect-ratio）和视口单元：http://jsfiddle.net/79Fhb/。

HTML：

<div id="outer">
    <div id="inner"></div>
</div>

CSS：

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

#outer {
    background-color: #bbb;
    height: 100%;
}

#inner {
    background-color: #ff9933;
}

#inner:before {
    content: "";
    display: block;
    padding-top: 50%;
}

@media screen and (min-aspect-ratio: 2/1) {
    #inner {
        height: 100%;
        width: 200vmin;
    } 
}

缩放元素以按比例填充空间

2 个答案: