j查询<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;
}

这将确保图像填充#第一个分区。