javascript - 确保调整任何内容的大小以适应固定的 div

Question

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

1 - div 中的所有内容都可见，如果有很长的行，它们将被迫换行，或者干脆被 chop 。

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

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

最后一个好处:内容中最多只能有一张图片，但可以有多个链接。

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

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

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

Answer 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;
}