html - 纯 CSS iframe 响应给定比例

Question

div.scroll {
    position:absolute;
	-moz-transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	-webkit-transform: rotate(-7deg);
	background-color: #00FFFF;
    width: 190px;
    height: 250px;
	overflow: scroll;
	z-index:1;
	margin:0 auto;
	left:220px;
	top:68px;
	
}
size {
	max-width: 100%;
	max-height:100%;
	}

<div class="size"><div class="scroll"><iframe src="http://www.kopfkino-kollektiv.de"></iframe></div></div>

我正在为一个投资组合网站编写代码，但我遇到了 iframe 问题。它是否具有我给定的比率或者它有响应!我两个都需要!正如您在屏幕截图中看到的那样，我需要始终将 iframe 完全悬停在 ipad 屏幕上!你们能帮帮我吗？

HTML

     <div class="size"><div class="scroll"><iframe src="http://www.kopfkino-kollektiv.de"></iframe></div></div>

CSS

        div.scroll {
position:absolute;
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
background-color: #00FFFF;
width: 190px;
height: 250px;
overflow: scroll;
z-index:1;
margin:0 auto;
left:220px;
top:68px;
}


  size {
max-width: 100%;
max-height:100%;
}

截图

now

should

Answer 1

1. 将 iframe 设置为占据父容器的 100% width 和 height，并且
2. 修复父 .scroll 容器以通过 scroll:auto 移除强制滚动条，并移除空白或使用 font-size:0 来防止由标记中的空格引起的问题(否则可能会出现两组滚动条)。
3. 根据需要调整 iframe margin 或位置以获得正确的叠加层。但是您没有包含指向背景图片的链接，因此在您这样做之前我无法向您展示。

div.scroll {
  position: absolute;
  -moz-transform: rotate(-7deg);
  -ms-transform: rotate(-7deg);
  -o-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  background-color: #00FFFF;
  width: 190px;
  height: 250px;
  overflow: auto;
  z-index: 1;
  margin: 0 auto;
  left: 220px;
  top: 68px;
  font-size: 0;
  margin: 0;
  padding: 0;
}
size {
  max-width: 100%;
  max-height: 100%;
}
iframe {
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
}

<div class="size">
  <div class="scroll">
    <iframe src="http://www.kopfkino-kollektiv.de"></iframe>
  </div>
</div>