CSS css背景图像调整宽度裁剪高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11218952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css background image resize width crop height
提问by markhorrocks
I am using this code from css tips and tricks to cover a background image. The problem is that it rescales the image to fit both width and height and changes the aspect ratio. I want the background image to rescale to full screen width and then crop the height only (starting from the top of the image, not the center) to cover the view port. In this way, the image aspect ratio will be maintained.
我正在使用 css 提示和技巧中的此代码来覆盖背景图像。问题在于它重新缩放图像以适应宽度和高度并更改纵横比。我希望背景图像重新缩放到全屏宽度，然后仅裁剪高度（从图像顶部开始，而不是中心）以覆盖视口。这样，图像纵横比将保持不变。
A secondary problem I have is that it doesn't seem to work unless I use the FQDN for the image instead of just the url below.
我遇到的第二个问题是，除非我对图像使用 FQDN 而不是下面的 url，否则它似乎不起作用。
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
回答by Nit
Instead of
代替
background-size: cover;
you will want to use
你会想要使用
background-size: 100% auto;
Cover will stretch the image to the smallest size such that both its width and its height can fit inside the content area, hence your issue. See more about that over here.
Cover 会将图像拉伸到最小尺寸，使其宽度和高度都可以容纳在内容区域内，因此您的问题。在此处查看更多相关信息。
回答by hasanyasin
Image aspect ratio is not changed when you use cover. However, I believe what you want is to fix bottom of the image, since you told that you want it to be cropped from top, not center, which I thought you wanted to say not from top and bottom.
使用 时，图像纵横比不会改变cover。但是，我相信您想要的是修复图像的底部，因为您告诉过您希望它从顶部裁剪，而不是从中心裁剪，我认为您不想从顶部和底部说出来。
If you want to keep the bottom at the bottom, (maybe a grassland with an avoidably large sky?) then you will need to change positioning to center bottomfrom center center.
如果您想将底部保持在底部（也许是一片天空可避免的大草原？），那么您需要将定位更改为center bottomfrom center center。
If you make it 100% auto as Nit suggested, then, on a window where height/width ratio of the html element is larger than your image's, you will see empty space at the top which can be what you wanted especially in case you are using an image that fades into the same color at top...
如果您按照 Nit 的建议将其设为 100% 自动，那么，在 html 元素的高度/宽度比大于图像的窗口上，您将在顶部看到空白区域，这可能是您想要的，特别是如果您是使用在顶部淡入相同颜色的图像......
For your second problem, it is not fqdn, it is the relative/absolute referencing of your path. According to your css, there should be an image folder where your css file is which has a bg.jpg in it.
对于您的第二个问题，它不是 fqdn，而是您路径的相对/绝对引用。根据您的 css，您的 css 文件所在的图像文件夹中应该有一个 bg.jpg。
index.html
main.css
images/
bg.jpg
回答by DavidVII
I would use JS for this instead. CSS doesn't seem to handle aspect ratios very well yet.
我会为此使用 JS。CSS 似乎还不能很好地处理纵横比。
Try out something like this:
尝试这样的事情：
First, create a div and put an image in it
首先，创建一个div并在其中放置一个图像
<div class="big-image">
<img src="path.jpg" width="1000" height="1000" alt="whatever">
</div>
Then do this in your CSS:
然后在您的 CSS 中执行此操作：
.featuredImage img {
position: fixed;
top: 0;
left: 0;
z-index: -10;
}
/* this class will be added via JS */
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
And finally, your JS
最后，你的 JS
var theWindow = $(window),
$bg = $(".big-image img"), // Use your image selector here.
aspectRatio = $bg.width() / $bg.height();
$bg.removeAttr('width');
$bg.removeAttr('height');
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
Let me know if this makes sense. Not exactly just CSS I know, but it's a solution
让我知道这是否有意义。不完全是我知道的 CSS，但它是一个解决方案
