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;
}

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

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

2 个答案: