jQuery <div> 背景图像全尺寸拉伸(stretch)

Question

基本上我想做的是用纯 HTML、CSS 和 jQuery 重新创建这个网站。

目前该网站在搜索结果中的表现不太好，显然是因为它是 Flash，所以这就是我正在努力解决的问题。

我正在寻找的东西非常复杂，但我很乐意为所需的任何单独部分采取解决方案，并且我会弄清楚如何将它们组合在一起。我在整个 Internet 上进行了高低搜索，并调用找到任何接近我想要的东西。

这是我需要的。主要是我担心的图像DIV...

• 我有两个 DIV，一个用来存放图片，另一个用来存放图片下方的链接。顶部 DIV 的高度为 70%，第二个为 30%。
• 70% 高度顶部 DIV 中的图像应拉伸(stretch)以至少填满 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 的整个宽度。