iframe - Markdown Jekyll : Insert an iframe that fills the container

Question

how to include video in jekyll markdown blog向我解释了如何在帖子中插入 iframe。但是，我将 iframe 用于传单 map 。不像 How to display a leaflet map in a single post in jekyll?我将 map 代码存储在单独的位置 html 文件中，并在我的帖子中的 iframe 中显示 map 。我在 github 上托管这个，所以我不能使用 jekyll 插件。

我可以显示 map ，但我不明白如何确保 iframe 以响应浏览器窗口大小调整的方式填充博客容器。有没有办法只在博客文章的代码中指定这个，或者我是否必须像这样创建我自己的 css 样式 blogpost

Answer 1

我假设您正在为您的 map 代码执行 {% include mapName.html %}，但无论哪种方式，您的问题都更多地基于容器和 CSS 样式，您可能需要编写自己的样式以确保 iframe 具有响应性，这是一个示例，这是取自并详细解释 here
(也请参阅该站点以获取更多示例，您确实应该这样做，因为它是一个非常详细的解释)。 这是该过程的一个简短示例 ，如该帖子所述:

使用 id 为您的 iframe 创建一个 div:

<div class="video-container">
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
</div>

在 CSS 中设置 div 样式:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

最后样式 iframe :

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

话虽如此，如果您的 map 代码不是完全唯一的，您可以走更简单的路线，而不是使用 embed.ly 之类的服务处理任何 CSS 样式，我在自己的博客上嵌入视频和 iframe 时使用它，因为它使用响应式图像Javascript。