有没有一种方法可以为背景图片使用max-width和max-height？

Question

简单明了。

将我的布局转换为流动布局，在处理可扩展图片。使用img标签并将max-width设置为100％可以完美解决，但我更愿意使用一个把图片设为背景的div。

我遇到的问题是，图像不会按其所在背景div的大小进行缩放。有什么方法可以在背景代码中添加标记，将其设置为容器的100％宽度？

#one {
    background: url('../img/blahblah.jpg') no-repeat;
    max-width: 100%;
}

- technopeasant

Answer 1

正如thirtydot所说，您可以使用CSS3的background-size语法：

例如：

-o-background-size:35% auto;
-webkit-background-size:35% auto;
-moz-background-size:35% auto;
background-size:35% auto;

然而，正如 thirtydot 所述，这在 IE6、7 和 8 中不起作用。

有关 background-size 的更多信息，请参见以下链接： http://www.w3.org/TR/css3-background/#the-background-size

- Dan

Answer 2

您可以使用 background-size 来实现这个效果：

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
}

除了cover之外，您可以将background-size设置为许多其他值，看看哪一个适合您：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

规范：https://www.w3.org/TR/css-backgrounds-3/#the-background-size

它在所有现代浏览器中都有效：http://caniuse.com/#feat=background-img-opts

- thirtydot

---

Ef 'em. 我不会在IE7中进行测试，把IE8也放到一边我也不觉得内疚。感谢你的帮助！ （注：该段文本含有粗俗语言） - technopeasant

我听到你说的话了。我的访客中不到10%的人数并不算多}:) - technopeasant

FYI，我确实感到有些内疚，所以我添加了一些 Modernizr 类来重新调整图像大小，以防背景大小不受支持。 - technopeasant

background-size 实际上不是设置 max-width 或 max-height 的一种方式。这与 img 元素具有 max-width 和 max-height 属性的意义不同。 - Nojan

@nOjan：没有人说过它是。 - thirtydot

有关 fixed 的信息 - https://developer.mozilla.org/docs/Web/CSS/background-attachment - Alex78191

Answer 3

看起来您想要缩放背景图像？在下面的参考文章中，您可以了解如何使用CSS3来实现此目的。

如果我误读了问题，那么我虚心接受投票反对。（不过还是好知道一下）

请考虑以下代码：

#some_div_or_body { 
   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;
}

这将适用于所有主要的浏览器，当然在IE上并不容易。不过有一些解决方法，比如使用微软的滤镜：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

有一些替代方案可以使用jQuery来稍微放心一些：

HTML

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

jQuery：

 $(window).load(function() {    

var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();

function resizeBg() {

    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }

}

theWindow.resize(resizeBg).trigger("resize");

});

希望这可以帮到你！

来源：完美的全屏背景图像

- Philll_t

---

感谢您发布答案！请注意，您应该在此网站上发布答案的有用部分，否则您的帖子可能会被删除请参阅FAQ中提到的“几乎只是链接”的答案。如果您愿意，仍然可以包含链接，但仅作为“参考”。答案应该能够独立存在，不需要链接的支持。 - Andrew Barber

嗨，安德鲁，感谢你的关注！我已经修改了我的答案以符合要求。 - Philll_t

你的回答应该被接受。background-size: cover;就是解决方法。 - Serj Sagan

Answer 4

很不幸，CSS中没有min(或max) -background-size，您只能使用background-size。但是，如果您正在寻找响应式背景图像，则可以使用Vmin和Vmax单位来设置background-size属性，以实现类似的效果。

例子：

#one {
    background:url('../img/blahblah.jpg') no-repeat;
    background-size:10vmin 100%;
}

这会将高度设置为您拥有的较小视口大小的10％，无论是垂直还是水平，同时将宽度设置为100％。

了解有关CSS单位的更多信息，请访问：https://www.w3schools.com/cssref/css_units.asp

- Hejar

---

background-size 声明中，宽度不是在高度之前吗？https://www.w3.org/TR/css3-background/#the-background-size - Kita

Answer 5

这就是你要寻找的解决方案！

background-size: 100% auto;

- DarKayserLeo

Answer 6

使用 :before 或 :after 与 max-height

section {
  height: 100vh;
  width: 100%;
  background-color: #222;
}

section::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 50%;
  height: 100%;
  max-height: 100px;
  transform: translateX(-50%);
  opacity: 0.8;
  background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
  background-repeat: no-repeat;
  background-position: 50% bottom;
  background-size: contain;
}

<section></section>

- Amir Rahimi