根据图像的iframe大小

Question

是否可以将iframe尺寸和位置保持为图像？

http://federicomalagoni.it/

浅灰色视图是iframe的一个示例，该网站是响应式的，所以我需要根据图像的iframe大小和位置（iframe必须放在iphone屏幕图像上）。 像那样：

我已尝试将iframe修复到正确的位置，但是在页面的更改大小上，他们不会以与iphone图像相同的方式进行操作。

Answer 1

您可以使用position: relative和position:absolute执行此操作，然后计算背景图片中屏幕的百分比位置。

＆＃13;

＆＃13;

div {
  float: left;
}
.phone {
  background: url(http://federicomalagoni.it/images/iphone6.png);
  background-size: contain;
  width: 100%;
  padding-bottom: 201.1848341%;
  height: 0;
  position: relative;
}
iframe {
  background: #000;
  z-index: 1;
  position: absolute;
  border: 0;
  width: 87.2%;
  height: 77.856%;
  top: 11.54%;
  left: 6.2%;
}

＆＃13;

<div style="width:100px;">
  <div class="phone"><iframe src="#"></iframe></div>
</div>
<div style="width:150px;">
  <div class="phone"><iframe src="#"></iframe></div>
</div>
<div style="width:200px;">
  <div class="phone"><iframe src="#"></iframe></div>
</div>

＆＃13;

＆＃13;

＆＃13;