确保任何内容被调整大小以适合的固定格内

好了，所以这里的问题：我有，内容将被然而所放置在其内，被设定为几乎整个屏幕尺寸（在移动设备上）一个div内容本身不在我的直接控制之下。内部图像或链接上不会有内联样式。我需要确保：确保任何内容被调整大小以适合的固定格内

1 - 一切都是可见的专区内，如果有长行，他们被迫包裹，或简单地切断。

2 - 图片应保持它们的纵横比，但被调整到留在div的范围内。

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

最后一个奖金：有内容中的最大一个图像的会有，但可能有多个环节。

我在这里发现了一些其他的答案，但没有任何符合这个特定的挑战。

jQuery是一种选择，但我发现它缓慢的移动设备上，jQuery Mobile的是一种选择，但同样的基本问题。

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

来源

2011-02-15 Eric

是否有内容上的标记？段落，标题等？ – ajcw 2011-02-15 22:16:33

除图像标签前后的“
”外没有任何标记（如果存在）。否则，zilch – Eric 2011-02-15 22:27:48

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

来源

2011-02-16 04:59:01

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

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

（更换我的宽度值与你）

所以它显示专区内正确这将格式化文本，但它可能是一个文本块，但这可能是你想要的。如果你想格式化，你必须使用jQuery来搜索div中的文本换行符，并用</p><br /><p>替换它们...只要确保添加开始和结束段落标记。

来源

2011-02-15 22:55:12 AJMaxwell

确保任何内容被调整大小以适合的固定格内

回答

相关问题