当iframe视窗很小时显示图像，使用媒体查询

Show image when iframe viewport is small, using media queries

本文关键字：图像 查询 媒体 显示图 显示 iframe 小时      更新时间：2023-09-26

我想在一个400px的正方形iframe中显示一个demo.html页面。html应该只显示一个图像，当视图端口小于400px。之后，当我点击demo.html中的图像时，相同的页面应该呈现为全屏模式。

例如，你可以从slideshare.com上嵌入一张幻灯片，然后点击全屏图标以全屏呈现。我希望我的页面呈现类似的

你可以这样做:

调整小提琴的大小以查看媒体查询是否正常。

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;}
}
相关文章：