背景图像缩放同时保持纵横比

Question

我希望我的背景图像会像幻灯片一样自动更改.但无论浏览器窗口的大小如何,我都希望图像能够填满背景......如果按比例缩小,图像的宽高比不会改变.

这是我正在尝试做的一个例子:

http://www.thesixtyone.com/

我怎样才能完成这些任务？任何帮助都感激不尽.

Answer 1

使用CSS3,您将使用background-size属性.

background-size: contain; 缩放图像,同时保持其固有的纵横比(如果有的话)到最大尺寸,使得其宽度和高度都可以适合背景定位区域.

Contain 始终适合视口中的整个图像,只要背景图像和浏览器窗口的比例不同,就会在上下或左右两侧留下不透明边框.

background-size: cover; 缩放图像,同时保持其固有的纵横比(如果有的话)到最小尺寸,使得其宽度和高度都可以完全覆盖背景定位区域.

Cover总是填充浏览器窗口,切断过程中的一些头发或耳朵,这是我个人喜欢的大多数情况.您可以使用background-position属性控制图像在视口中的对齐方式.

Answer 2

你不能,至少不喜欢你现在尝试.

但是,你可以做的是创建一个<img>替代,并使用css设置position:absolute,将其缩放到100%宽度并从父级裁剪它overflow:hidden

例如:http://jsfiddle.net/GHmz7/4/