Question

＆＃13;

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%;
	}

＆＃13;

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

＆＃13;

我正在编制投资组合网站，我遇到iframe问题。它有我给定的比例或它是响应！我需要两个！正如您在屏幕截图中看到的，我需要始终将iframe悬停在ipads屏幕上！你们能帮助我吗？

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%;
}

SCREENSHOT

now

should

Answer 1

设置iframe的样式，以占用父容器的100％width和height，
修复父.scroll容器以通过scroll:auto删除强制滚动条，并删除空格或使用font-size:0以防止标记中的空格引起的问题（否则可能会出现两组滚动条）出现）。
根据需要调整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>

纯css iframe响应给定比例

1 个答案: