我的代码非常简单，我花了一天的时间解决问题，但仍然没有进展：/我想用背景图像显示iframe。代码段代码未显示背景图片，因此您可以在此处观看实时演示：http://lukdan2.47.pl/index2.php
.parrent {
width: 100%;
background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 427px;
}
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
}
iframe {
border: none;
width: 100%;
height: 100%;
margin: 0;
}<div class="parrent">
<div class="child">
<iframe src="http://sshtest.co.pl/" id="iphone-x-portrait"></iframe>
</div>
</div>
您可以看到iframe的高度过高。我可以添加
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
height: 550px;
padding-bottom: 37%;
}
它工作正常。
但是，对于低于460像素的屏幕，父div会变小，因此子级的静态高度无法正常工作。
我尝试将父div更改为显示flex和table（还更改了子div），但没有发现能解决我的问题的方法。
请帮助。