如何缩放背景图像而不损失比例 [英] How to scale a background image without losing proportions

问题描述

我想创建一个网页背景图片，填充整个背景，而不会扭曲图片并更改图片的比例。

I want to create a web page background image that fills the entire background, without distorting the image and changing it's proportions.

您可以在LaunchRock的网页上和他们的首页上看到一个很好的实现，例如。

You can see a great implementation of this on LaunchRock's pages, and on their homepage, for example.

我看到这个问题在StackOverflow 但是如果你玩的产生，你会看到背景图像是100％的高度和100％的宽度，这意味着

I saw this question on StackOverflow however if you play around with what that produces you'll see that the background image is 100% height and 100% width which means that the original proportions of the photo are not maintained and the image is stretched.

请注意，在LaunchRock示例中，如果调整浏览器窗口的大小，图像会按比例增长，并始终填充整个窗口（无论它们使用什么大小的窗口或背景图片）。

Notice in the LaunchRock example that if you resize your browser window the image grows proportionally and always fills the entire window (no matter what size window or background image they use).

如果浏览器窗口不够宽，它会裁剪背景图像的边居中和裁剪左右侧），如果窗口不够高，它会裁剪背景图像的底部。

If the browser window is not wide enough it crops the sides of the background image (keeping the image centered and cropping the left and right sides) and if the window is not high enough it crops the bottom part of the background image.

无论浏览器窗口是什么尺寸，图像高度/宽度比都保持不变，整个背景都被填满。

No matter what size the browser window is, the image height/width ratio is maintained and the entire background is filled.

我想这不能用纯CSS，可能需要一些JavaScript。
任何想法？

I'm guess this can't be done with pure CSS, some JavaScript may be needed. Any ideas?

感谢

推荐答案

仅使用CSS，像这样：

It is done with CSS only, like this:

body {    
    background: black url(/images/back.jpg) no-repeat top center fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

有可能的事情：

• CSS属性 background-size 设置为 cover 版本


• 使用背景图片在侧面变黑。


• 到中心


• 使用固定 $ b

• CSS property background-size set to cover and its vendor prefixed versions
• using a background-image that fades to black on the sides
• position set to top center
• using the fixed property

这篇关于如何缩放背景图像而不损失比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！