按比例调整窗口大小调整时div的宽度和高度

Question

几天我试图使div像图像一样大小(按比例).

例如,如果我有一个尺寸为500x140的div,我希望它在浏览器重新调整大小时作出反应,就像一个宽度为"100%"的图像.我发现了类似的问题,但它们对我不起作用.

有没有办法做到这一点(不使用虚拟图像)？

编辑:

ps抱歉我的英语不好.

Answer 1

我自己找到了答案.

HTM:

<div class="parent">
   <div class="child">
        something...
   </div>
</div>

CSS:

.parent {
    position: relative;
    width:1280px;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px;
}
.parent:before {
    margin-top: 25%;
    content: '.';
    font-size: 0;
    display: inline-block;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
    max-height: 100%;
}

代码中有趣的部分是.parent:before选择器的margin-top.通过这个你可以调整div的基本高度. 这是jsfiddle - http://jsfiddle.net/ndzCL/

它不是完美的解决方案,但它很简单,只使用CSS.

谢谢大家的帮助:)