css - 可以为背景图像设置最大宽度吗？ (想要缩小背景图像，但不放大)

Question

我正在使用一系列 div 元素来显示一组客户 Logo 。使用背景图像的原因是允许图像在 div 中垂直和水平居中，而不是使用 img 元素的更 hack-y 解决方案。

问题:我使用的是流畅的响应式网格，因此当浏览器低于最大宽度 (1000px) 时，div 元素开始缩小。这会导致某些客户端 Logo (背景图像)在边缘处被剪裁。这是给定的。我想让这些图像在碰到父元素的边缘时开始缩小。

background-size: contain partially 解决了这个问题。唯一的缺点是它还会将背景图像的大小缩放到 100% 以上，这是一个问题。它会拉伸(stretch) Logo ，这对我来说不是一个好的解决方案。

我也可以不使用背景大小，并让客户 Logo 设置最大宽度。但是，这会导致客户端列表转到响应式布局的额外行。我想避免这种情况，但对我来说这是唯一可行的解​​决方案。

话虽如此，有没有办法在不放大的情况下利用背景大小？或者是否有另一种方法可以使图像在其框内居中？

快速浏览一下代码:

HTML

<div class="client"><div class="client1"></div></div>
<div class="client"><div class="client2"></div></div>
<div class="client"><div class="client3"></div></div>

CSS

.clientlist .client { width: 20%; height: 90px; float: left; } /* Five clients a row */
.clientlist .client div { 
    width: 100%; 
    height: 100%; 
    background-position: center center; 
    background-repeat: no-repeat; } /* Vertically centers background images */
.clientlist .client .bcs { background-image: url(../images/client-bcs.jpg); } /* bunch more like this to define image */

Answer 1

看起来这还不可能。

基于 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax 上的语法示例，您会认为您可以按照“背景大小:自动、自动、包含；”但在我对 Chrome、FF 和 IE 的初步测试中，结果并非如此。它们似乎都可以很好地处理 SVG。 Chrome 和 IE 因 PNG 而失败。所有这些都因 GIF 而失败。

对我来说，我们正在寻找的这种行为似乎在 http://www.w3.org/TR/css3-background/#the-background-size 上被清楚地阐明了。 :

If both values are ‘auto’ then the intrinsic width and/or height of the image should be used, if any, the missing dimension (if any) behaving as ‘auto’ as described above. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for ‘contain’.

但是，结果并非如此，所以也许我遗漏了什么。