Question

我目前在学校开设一个课程项目，我正在设置一个模仿聊天室的网页。我在聊天室和聊天室本身都有一个侧边栏，它们都是包含图像的iframe。我希望iframe能够快速响应;随着视口大小的变化，我喜欢iframe及其中的图像也可以调整大小。

我目前已经将两个iframe浮动到左侧并添加了一些间距以使其看起来更像聊天室。我访问了以下链接：Scale iFrame css width 100% like an image，但这与我尝试使用嵌入式视频而不是滚动图像所做的不同。有没有人解决这个问题？我一直在搞乱风格......请访问www.westerosnet.jaylaiche.com网页。

此外，这里有HTML和CSS：

   <html>
    <head>
        <meta charset=utf-8 />
        <title>Welcome to Westeros.Net</title>
        <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    </head>
    <body>
        <div class="container">
            <h1>Welcome to Westeros.net</h1>
            <h2>Your source for virtual strategy, betrayal, and more!</h2>
            <iframe src="sidebar.jpg"></iframe>
            <iframe id="room" src="chatroom.jpg"></iframe>
        </div>
        <div class="footer">
            <h3>To learn the real events of this scene, click <a href="http://gameofthrones.wikia.com/wiki/Red_Wedding">here</a>.</h3>
            <h3 id="copyright">Page created by Jay Laiche for Traci Gardner's ENGL 3844 Remixing A Story.</h3>
        </div>
    </body>
</html>


CSS:
    body {
    background-color: #cccccc;
}

iframe {
    overflow: scroll;
    height: 800px;
    float: left;
    border: 1px dotted #330099;
    position: relative;
    max-width: 100%;
    display: block;
}

#room {
    margin-left: 5%;
    width: 600px;
}

.container {
    margin-left: 10%;
    margin-bottom: 50px;
    max-width: 100%;
    overflow: auto; 
    -webkit-overflow-scrolling:touch;
    position: relative;
}

响应式iFrames仅限图像

0 个答案: