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

问题描述

我想为我的背景图片自动更改幻灯片放映。但我想要的图像填充背景，无论浏览器窗口是什么大小...如果它缩小，图像的宽高比不会改变。

这是我想要做的一个例子：

如何完成这些任务？任何帮助将非常感激。

解决方案

你不能，至少不喜欢你现在试图。 >

但你可以做的是创建一个< img> ，而css设置 position：absolute ，将其缩放到100％宽度，并从父项裁剪 overflow：hidden

示例：

I would like to have images for my background that change automatically like a slide show. But I would like the images to fill the background no matter what size the browser window is...and if it is scaled down, the aspect ratio of the image does not change.

Here is an example of what I'm trying to do:

http://www.thesixtyone.com/

How can I accomplish these tasks? Any help will be much appreciated.

解决方案

You can't, at least not like you are trying to now.

What you can do, however, is create an <img> instead, and with css set position:absolute, scale it to 100% width and crop it from the parent with overflow:hidden

example: http://jsfiddle.net/GHmz7/4/

这篇关于背景图像缩放，同时保持纵横比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！