Question

我有一个div在另一个div中，其背景是手机的背景。我试图让内部div在视口变小时调整大小。

您可以看到演示here

HTML

<div class="phone-container">
    <div class="screen">  
    </div>
</div>

CSS

.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的宽度会正确调整，但高度保持不变。关于如何在不使用JavaScript的情况下正确响应内部div高度的任何建议？

Answer 1

百分比top基于元素父级的height。在您的情况下，当您调整窗口大小时，父级height不会更改，因此子级top也不会更改。请参阅documentation for top。

我成功使用了不同的结构，让图像定义.phone-container的高度：

<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;
}

屏幕相对于图像的位置不是像素完美，但您可以调整值以使其更准确。

Working Example (jsFiddle)

Answer 2

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

Answer 3

如果您仍想使用<div>代替<img>，则有一种方法可以保持<div>的宽高比：

<强> LIVE DEMO

HTML：

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

CSS：

.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;
}

当视口变小时，内部div的高度不会调整

3 个答案: