html - 像电视屏幕一样在另一个 div 内部的 Div

Question

我正在使用 wordpress 制作一个显示一些网站示例的页面。基本上我有一个带有移动屏幕背景图像的 div，在其中我有另一个 div，它从我在我的 cusotm 分类帖子中创建的字段中获取上传的图像。这是我到目前为止所拥有的:

<?php if( get_field('tablet_image') ): ?>
    <div class="tablet-screen">
        <div class="inside-screen">
            <img src="<? the_field('tablet_image'); ?>" height="1027" width="768" class="img-responsive">
            <p><? the_field('tablet_image'); ?></p>
        </div>
    </div>
<?php endif; ?> 

这很完美，可以同时显示平板电脑屏幕和图片。

然而，CSS 部分是我需要帮助的地方，这是我目前所拥有的:

.tablet-screen {
    background-image: url(../img/tablet-screen.png);
    position: absolute;
    height: 1080px;
    width: 812px;
}

.inside-screen {
    position: absolute;
    height: 1027px;
    width: 768px;
}

我需要添加什么样的样式才能使其正常工作？

您可以在此处查看其中一个页面以供引用:

MY SITE

Answer 1

你可以这样做:

CSS

.tablet-screen {
    background:transparent url(https://upload.wikimedia.org/wikipedia/commons/a/a4/IPad_3.png) no-repeat center center;
    background-size: 812px 1080px;
    position: absolute;
    height: 1080px;
    width: 812px;
}

.inside-screen {
    position: relative;
    left: 97px;
    top:100px;
    height: 880px;
    width: 618px;
    background: #fff;
    overflow: auto;
}

HTML

<div class="tablet-screen"><div class="inside-screen"></div></div>

注意:调整你的需求

DEMO HERE