jQuery <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标签,并使其width100%.它将保持纵横比并将填充父级的整个宽度div.