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

【问题标题】：jQuery <div> background image full size stretchjQuery <div> 背景图片全尺寸拉伸
【发布时间】：2011-09-27 00:55:12
【问题描述】：

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

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

我正在寻找的东西非常复杂，但我很乐意为所需的任何单独部件提供解决方案，并且我会弄清楚如何将它们组合在一起。我在互联网上到处搜索，然后打电话找到任何接近我想要的东西。

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

我有两个 DIV，一个用于保存图像，另一个用于保存其下方的链接。顶部 DIV 的高度为 70%，第二个为 30%。
70% 高度顶部 DIV 中的图像应拉伸到至少填满 DIV。我的意思是图像周围不应该有空白，但显然图像也需要保持其纵横比。
如果可能的话，我希望一些图像能够在这个 DIV 中旋转并带有简单的淡入淡出效果，可能是从 XML 文件加载的（但不一定）。

这是在我头上还是很容易做到？

感谢您提供的任何帮助。

【问题讨论】：

CSS 布局绝非易事。欢迎加入俱乐部。
告诉我吧……我之前没有设计过全屏液体布局，所以这绝对是一个挑战。

标签： jquery css image html

【解决方案1】：

您也可以使用 CSS background-size 和 background-position 属性，而无需编写一行 jQuery。像这样：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：