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

Answer 2

Вам нужно добавить что-то вроде этого:

.inside-screen { 
    position: absolute; 
    height: 1027px; 
    width: 768px; 
    left: 38px; 
    top: 41px; 
} 

Но я думаю, ширину и высоту от вашего .tablet -screen отличается от ширины/высоты вашего изображения.

Answer 3

Это так же отзывчиво, как я мог его получить. (Например, вы можете настроить его с помощью мультимедийных запросов).

Обратите внимание, что размеры еще не совершенны, но вы можете легко отрегулировать это. (Вы можете измерять и вычислять точные проценты с помощью программного обеспечения, такого как Adobe Photoshop). Верхний и нижний поля должны быть одинаковыми, как левое и правое поле (неиспользованного содержимого - граница планшета, тень и т. Д.).

HTML:

<div class="tablet-screen"> 
    <div class="tablet-screen"> 
    <img class="tablet-image" src="http://gm2016.demosite.us/wp-content/themes/roots/assets/img/tablet-screen.png" /> 
    <div class="tablet-image-inside"> 
     <img src="http://gm2016.demosite.us/media/Godfather-Films-Desktop.png" /> 
    </div> 
    </div> 
</div> 

CSS

.tablet-screen { 
    width:100%; 
    max-width:843px; 
    position:relative; 
} 

.tablet-image { 
    width:100%; 
} 

.tablet-image-inside { 
    position: absolute; 
    width: 93%; // percentage of used width (within the tablet screen) 
    height:93%; // percentage of used height (within the tablet screen) 
    left: 3.5%; // percentage of unused width (the outside of the table screen) 
    top: 3.5%; // percentage of unused height (the outside of the tablet) 
    overflow:auto; 
} 

.tablet-image-inside img { 
    width:100%; 
} 

JSFiddle demo