gpt4 book ai didi

javascript - 使用媒体查询在 iframe 视口(viewport)较小时显示图像

转载 作者:行者123 更新时间:2023-11-28 17:48:48 25 4
gpt4 key购买 nike

我想在一个 400 像素的方形 iframe 中显示一个 demo.html 页面。当视口(viewport)小于 400px 时,demo.html 应该只显示图像。稍后,当我在 demo.html 中单击该图像时,同一页面应呈现为全屏模式。

例如,您可以从 slideshare.com 嵌入一张幻灯片,然后单击全屏图标以全屏呈现。我希望我的页面以类似方式呈现。

最佳答案

你可以这样做:JS Fiddle showing example

调整 fiddle 的大小以查看媒体查询的工作情况。

html

<body>
<img src="" id="smallScreenImage" width="500" height="500" />

<div id="mainContentWrap">
<div>All content goes here that should be displayed above 500px</div>
</div>

</body>

CSS

#smallScreenImage {display: none;}
#mainContentWrap {display: block;}

@media only screen and (max-width:500px){
#smallScreenImage {display: block;}
#mainContentWrap {display: none;}
}

关于javascript - 使用媒体查询在 iframe 视口(viewport)较小时显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22721188/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com