jQuery<div> 背景圖像全尺寸拉伸</div><div id="text_translate"><p>基本上我要做的是用純 HTML、CSS 和 jQuery 重新創建這個站點。</p><p> 目前該網站在搜索結果中的表現不太好，顯然是因為它是 Flash，所以這就是我要解決的問題。</p><p> 我正在尋找的東西非常復雜，但我很樂意為所需的任何單獨部件提供解決方案，並且我會弄清楚如何將它們放在一起。 我在互聯網上到處搜索，並打電話找到任何接近我想要的東西。</p><p> 這就是我需要的。 主要是我擔心的圖像DIV...</p><ul><li> 我有兩個 DIV，一個將保存圖像，另一個將保存其下方的鏈接。 頂部 DIV 的高度為 70%，第二個為 30%。</li><li> 70% 高度頂部 DIV 中的圖像應拉伸到<strong>至少填充</strong>DIV。 我的意思是圖像周圍不應該有空白，但顯然圖像也需要保持其縱橫比。</li><li> 如果可能的話，我希望一些圖像能夠在這個 DIV 中旋轉，具有簡單的淡入淡出效果，可能是從 XML 文件加載的（但不一定）。</li></ul><p> 這是在我頭上還是很容易做到？</p><p> 謝謝你提供的所有幫助。</p></div>

Question

基本上我要做的是用純 HTML、CSS 和 jQuery 重新創建這個站點。

目前該網站在搜索結果中的表現不太好，顯然是因為它是 Flash，所以這就是我要解決的問題。

我正在尋找的東西非常復雜，但我很樂意為所需的任何單獨部件提供解決方案，並且我會弄清楚如何將它們放在一起。 我在互聯網上到處搜索，並打電話找到任何接近我想要的東西。

這就是我需要的。 主要是我擔心的圖像DIV...

• 我有兩個 DIV，一個將保存圖像，另一個將保存其下方的鏈接。 頂部 DIV 的高度為 70%，第二個為 30%。
• 70% 高度頂部 DIV 中的圖像應拉伸到至少填充DIV。 我的意思是圖像周圍不應該有空白，但顯然圖像也需要保持其縱橫比。
• 如果可能的話，我希望一些圖像能夠在這個 DIV 中旋轉，具有簡單的淡入淡出效果，可能是從 XML 文件加載的（但不一定）。

這是在我頭上還是很容易做到？

謝謝你提供的所有幫助。

Answer 1

html

<div id="first">
    <img src="http://api.ning.com/files/HX-j3*PqLLSnezU7hpKPxnpTBF6CprX1BsCZ7AQZDuA2gNOgBgOr6md3zvtnmRxULlNmSpzuh49ycB3VNqtSifGoE3TzUAyS/aishwaryaraiface.jpg">
</div>

css

html,body {height:100%}
#first {height:70%;overflow:hidden;}
img {width:100%}

演示： http://jsfiddle.net/wMvh6/

這個想法是使用img標簽，並使其width 100%。 它將保持縱橫比並填充父div的整個寬度。

Answer 2

您還可以使用 CSS background-size和background-position屬性，而無需編寫一行 jQuery。 像這樣：

#first {
    background-image: url('URL-to-image');
    background-size: cover;
    background-position: center;
}

這將確保圖像填充#first div。