响应式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或3px边框半径来匹配图像。

Answer 2

演示 - http://jsfiddle.net/ey9ykhwd/3/

使用百分比来放置内容div父级应位于relative

.content {
    position: absolute;
    width: 68.7%;
    height: 67.6%;
    background: Red;
    left: 15%;
    top: 11%;
}

.cont {
  position: relative;
}
img {
  width: 100%;
}
.content {
  position: absolute;
  width: 68.7%;
  height: 67.6%;
  background: Red;
  left: 15%;
  top: 11%;
}
}

<div class="cont">
  <img src="http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png" />
  <div class="content">content here</div>
</div>