確保任何內容被調整大小以適合的固定格內

好了，所以這裏的問題：我有，內容將被然而所放置在其內，被設定爲幾乎整個屏幕尺寸（在移動設備上）一個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

確保任何內容被調整大小以適合的固定格內

回答

相關問題