纯CSS iframe的响应与一定比例

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

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

SCREENSHOT

now

should

来源

2016-01-23 kaeny

您的画面不会出现！ –

你可以创建一个jsfiddle或jsbin来重新创建问题吗？ –

截图现在可以工作！我刚刚创建了一个jsfiddler！ – kaeny

风格的iframe占用100％width和父容器的height，并
修复父.scroll容器，通过scroll:auto删除强迫滚动，要么删除空格或使用font-size:0防止您的标记所造成的空白问题（否则可能会出现两组滚动条）。
根据需要调整iframemargin或位置以获得正确的覆盖图。但是你没有包含背景图片的链接，所以直到你这样做，我才能展示给你。

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>

来源

2016-01-23 16:48:41 nothingisnecessary

纯CSS iframe的响应与一定比例

回答

相关问题