html - 响应图像内的响应div

Question

我想要响应式图像中的响应式 div，如下所示

如有任何帮助，我们将不胜感激。我不擅长 CSS:(

Answer 1

如果有人想在没有响应的情况下这样做，可以这样做。

使屏幕成为背景图像，然后使用相对定位的 iframe。我在演示中的屏幕上添加了一个 YouTube iframe。

Demo

        .outer {
    background-image: url('http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png');
    width:800px;
    height:596px;
}
.inner {
    position: relative;
    background-color:;
    left: 120px;
    top: 68px;
    width:550px;
    height:405px;
}

......................

<div class="outer"><iframe class="inner"></iframe>

您甚至可以使用 2 或 3 像素的边框半径来匹配图像。