我有一个使用Bootstrap显示天气预报的HTML页面。此页面最终将显示在iframe内，因此它具有固定的尺寸。当宽度> = 768px时，我希望图像水平显示。当您使浏览器更宽时，这可以正常工作。当宽度<768px时，我希望图像自己堆叠并缩小，以便所有文本和图像都适合iframe的尺寸。这是我遇到麻烦的地方。
这是我的fiddle。我使用了具有固定尺寸的父div来模拟iframe，并设置其背景颜色以显示内容溢出其父级的位置。应该显示的是日，然后是图像，然后是图像下方的高/低温。然后应该在周六和周日重复这一过程。相反，内容溢出其容器并被切断。此外，文本未按正确顺序显示。我想解决这个问题，同时仍然确保当浏览器更宽时水平图像不会中断。
答案 0 :(得分：0)
我觉得这有点让人困惑，因为我仍然无法完全理解你的问题。但那是你在找什么？ http://jsfiddle.net/ALkKB/15/
@media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
答案 1 :(得分：0)
我感谢San的所有帮助。我最终取消了使用Bootstrap，并根据iframe的方向实现了我自己的CSS媒体查询。我还必须使用一些Javascript来计算在加载和显示所有其他数据后剩余多少空间。
再次感谢。