确保调整任何内容的大小以适合固定 div答案

【问题标题】：Ensure any content is resized to fit within a fixed div确保调整任何内容的大小以适合固定 div
【发布时间】：2011-02-15 20:22:41
【问题描述】：

好的，问题来了：我有一个设置为几乎整个屏幕大小的 div（在移动设备上），内容将放置在其中，但内容本身不受我的直接控制。内部的图像或链接不会有内联样式。我需要确保：

1 - div 中的所有内容都是可见的，如果有很长的行，它们会被强制换行，或者只是被截断。

2 - 图像应保持其纵横比，但应调整大小以保持在 div 的范围内。

3 - 内容应该“填满”空间，根据需要变大或变小。

最后一个奖励：内容中最多可以有一张图片，但可以有多个链接。

我在这里找到了一些其他的答案，但没有什么能满足这个特殊的挑战。

jQuery 是一个选项，但我发现它在移动设备上运行缓慢，jQuery Mobile 是一个选项，但同样的基本问题。

以最有效的方式执行此任务的最佳 CSS 和 Javascript 组合是什么。

【问题讨论】：

内容是否有任何标记？段落、标题等？
除了图片标签前后的<br /> 之外没有任何类型的标记（如果存在）。否则，zilch

标签： javascript css xhtml mobile

【解决方案1】：

#wrapper {
 width: 960px;
 margin: 0 auto;
 overflow: hidden;
}

.img_class {
 height:auto;
 width:auto;
 max-width:960px;
}

/*If you have a div inside your wrapper then you would need this*/

#wrapper .contained_div {
 width: auto;
 display: inline-block:
 margin: 0;
}

/*If you want to stack stuffs one after another in a column then use this div */
.column {
 margin: 0 10px;
 overflow: hidden;
 float: left;
 display: inline;
}

【讨论】：

谢谢，这似乎现在可以工作，必须做一些极端的测试用例，但看起来不错：D

【解决方案2】：

我认为您不需要任何形式的 JavaScript。但如果没有你正在使用的样本，这是我最好的猜测：

#divId { height:auto; width:900px; white-space:normal; overflow:hidden; }
#divId img { height:auto!IMPORTANT; width:auto!IMPORTANT; max-width:900px; }

（用你的替换我的宽度值）

这将格式化文本，使其在 div 中正确显示，但它可能会显示为一团文本，但这可能是您想要的。如果要格式化，则必须使用 jQuery 在 div 中的文本中搜索换行符并将其替换为 </p><br /><p>... 请务必添加开始和结束段落标签。

【讨论】：