html - 缩小堆叠图像以适合 parent 的高度

Question

我有一个使用 Bootstrap 显示天气预报的 HTML 页面。此页面最终将显示在 iframe 内，因此它具有固定尺寸。当宽度 >= 768px 时，我希望图像水平显示。当您使浏览器变宽时，这会很好地工作。当宽度为 <768px 时，我希望图像自行堆叠并缩小，以便所有文本和图像都适合 iframe 的尺寸。这就是我遇到麻烦的地方。

这是我的 fiddle .我使用固定尺寸的父级 div 来模拟 iframe，并设置其背景颜色以显示内容溢出其父级的位置。应该显示的是天，然后是图像，然后是图像下方的高/低温。这应该在周六和周日重复。相反，内容会溢出其容器并被切断。此外，文本未按正确顺序显示。我想解决这个问题，同时仍然确保当浏览器变宽时水平图像不会中断。

Answer 1

我想这对我来说有点困惑，因为我仍然无法完全理解您的问题。但这是你要找的吗？ http://jsfiddle.net/ALkKB/15/

@media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}   
}