jQuery <div> 背景图片全尺寸拉伸

Question

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

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

我需要的东西相当复杂，但我很乐意接受任何需要的部分的解决方案，然后我会想办法把它们组合起来。我在互联网上四处搜寻，但找不到任何接近我想要的东西。

以下是我需要的内容。主要是我担心的图片DIV...

- 我有两个DIV，一个将容纳图片，另一个将容纳下面的链接。顶部的DIV高度为70％，第二个为30％。 - 70％高度的顶部DIV中的图像应该拉伸至至少填充DIV。我的意思是图片周围不应该有任何白色空间，但显然图片也需要保持其纵横比。 - 如果可能的话，我希望在此DIV中能够旋转几个图像，并具有简单的淡入淡出效果，可能从XML文件加载（但不一定）。

这是否超出了我的能力范围，还是很容易完成？

感谢您能提供的任何帮助。

- Kieran

---

CSS布局从来都不是一件容易的事情。欢迎加入这个俱乐部。 - sorpigal

告诉我吧…我以前没有设计过全屏液态布局，所以这绝对是一个挑战。 - Kieran

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的整个宽度。

- Sotiris

Answer 2

您也可以使用CSS的background-size和background-position属性，而不需要编写一行jQuery代码。如下所示：

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

这将确保图像填充#first div。

- EdA