Css 内分区'；当视口变小时，s高度不调整

我有一个div，在另一个div中，它的背景是电话。我试图使内部div随着视口变小而调整大小

你可以看到一个演示

HTML

---

当视口为正常大小时，效果良好，如果要逐渐减小视口的大小，则内部div的宽度将正确调整，但高度保持不变。关于如何在不使用JavaScript的情况下使内部div的高度正确响应的任何建议？

您已经将内部div的高度指定为百分比，这意味着它被设置为窗口高度的百分比。如果通过更改浏览器窗口宽度来“调整视口大小”，则不会更改高度。

百分比

top

基于元素父元素的

高度。在您的情况下，调整窗口大小时，父对象的
高度
不会改变，因此子对象的
顶部
也不会改变。看

我成功地使用了不同的结构，让图像定义了
的高度。电话容器
：

<div class="phone-container">
    <img src="http://imgur.com/eyIzwSW.jpg" />
    <div class="screen"></div>
</div>

屏幕相对于图像的位置并非像素完美，但您可能可以调整这些值以使其更精确

如果您仍然希望使用
而不是
，有一个技巧可以保持
的纵横比：


HTML:

.phone-container {
    position: relative;
    background: url(http://imgur.com/eyIzwSW.jpg) no-repeat;
    background-size: contain;
    width: 25.188em;
    height: 50em;
    max-width: 90%;
}

.screen {
    position: absolute;
    left: 8.1%;
    top: 15.1%;
    width: 82.5%;
    height: 65.1%;
    background-color: green;
    overflow: hidden;
}

<div class="phone-container">
    <img src="http://imgur.com/eyIzwSW.jpg" />
    <div class="screen"></div>
</div>

.phone-container {
    position: relative;
    width: 90%;
    max-width:552px;
}

.phone-container img {
    position:relative;
    width:100%;
}

.screen {
    position: absolute;
    left: 8.1%;
    top: 15.1%;
    width: 82.5%;
    height: 65.1%;
    background-color: green;
}

<div class="phone-container">
    <div class="aspect-ratio-container">
        <div class="dummy"></div>
        <div class="screen"></div>
    </div>
</div>

.phone-container {
    position: relative;
    background: url(http://imgur.com/eyIzwSW.jpg) no-repeat;
    background-size: contain;
    width: 25.188em;
    height: 50em;
    max-width: 90%;
}
.aspect-ratio-container {
    display: inline-block;
    position: relative;
    width: 90.5%;
}
.dummy {
    padding-top: 176%;
}

.screen {
    position: absolute;
    top: 18.5%;
    bottom: 0;
    left: 9%;
    right: 0;
    background-color: green;
}