背景图像大小不会保持 100% 高度答案

【问题标题】：Background image size won't stay 100% height背景图像大小不会保持 100% 高度
【发布时间】：2014-11-18 01:24:00
【问题描述】：

到目前为止，我的新网站的背景已经完成，现在我被卡住了，如果缩小浏览器窗口，背景图像的高度将低于 100%。

我希望它保持原尺寸，如果你缩小它，我不希望高度低于 100%（显示为白色）

代码在这里http://www.bestlincs.co.uk/new/

【问题讨论】：

你真的希望它覆盖整个屏幕吗？如果是这种情况，您需要使用 background-size:cover。
是的，也许是这样，但这些是滑块图像和 img 标签而不是背景标签 :-(
去掉img标签，让图片成为滑块的背景:)
请编辑您的问题并在此处发布您的代码。如果您在该链接处修复您的代码，那么这个问题对整个社区来说都是无用的。

标签： css image

【解决方案1】：

您可以使用以下代码：

html or .classname { 
  background: url(ImageUrlhere) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}

【讨论】：

每当我把无重复中心中心固定时，图像都不存在
因为你需要高度 :) 给他们增加高度 :)

【解决方案2】：

用途：

body {margin: 0; padding: 0}

并将 background-size 属性设置为cover:http://www.w3schools.com/cssref/css3_pr_background-size.asp

【讨论】：

不，关键是如果你将浏览器窗口缩小到太多，图像的高度会低于 100% 并显示为白色，我希望它保持覆盖

【解决方案3】：

在您的代码中，您没有为图像定义高度，给它一个 100% 的高度，它可以工作我在我的浏览器中尝试过并且工作正常

【讨论】：

我在 css 中使用最小高度
@Lee 您的链接似乎不起作用

【解决方案4】：

解决方案取决于您的需求 - 一种方法是在 css 中指定 min-width 和 min-height 属性而不是纯宽度。因为它将缩放到所需的任何大小，然后将其固定在左上角（请注意，右侧的任何“溢出”都将被切断）。

来源： http://css-tricks.com/perfect-full-page-background-image/

您的问题的详细说明：如果您将图像设置为其容器的 100% 宽度并且未指定高度，则它将始终被拉伸直到填满容器，同时缩放高度以保持图像的纵横比。

例如：取一张 200px x 100px 大的图片，将其放入一个 300px 宽的容器中，并将其宽度设置为 100%。它将沿两个维度缩放 300/200 = 1.5 倍，从而生成图像大小：300px x 150px。如果您的图像与用户屏幕的纵横比不同，会发生什么？它只会拉伸到全宽，然后将其余部分留空。设置高度也会带来更多问题，因为您的图像会失真。

【讨论】：

【解决方案5】：

HTML：

body { 
  margin:0;
  background: url(image.gif) no-repeat; 
  padding: 0;
}

那么背景大小将是 100%

【讨论】：