可以设置背景图像的最大宽度吗？ （想要缩小背景图像，但不能按比例缩放）

Question

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

问题：我使用流畅的响应式网格，因此当浏览器低于最大宽度（1000px）时，div元素开始缩小。这会导致某些客户端徽标（背景图像）在边缘处剪切。这是给定的。我想让这些图像在点击父元素的边缘时开始缩小。

background-size：包含部分解决了这个问题。唯一的缺点是它还将背景图像的大小缩放到100％以上，这是一个问题。它延伸了徽标，这对我来说不是一个好的解决方案。

我也可以不使用background-size，并且客户端徽标设置了最大宽度。但是，这会导致客户端列表转到额外的行以进行响应式布局。我想避免这种情况，但对我而言，这是唯一可行的解​​决方案。

话虽如此，无论如何都要利用背景尺寸而不扩大规模？或者是否有另一种方法可以使图像保持在盒子中心？

这里快速查看代码：

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上的语法示例，您会认为您可以按照“background-size：auto，auto，contains;”的方式执行某些操作。但在我对Chrome，FF和IE的初步测试中，它并没有这样。他们似乎都对SVG做得很好。 Chrome和IE使用PNG失败。所有这些都失败了GIF。

对我而言，似乎我们正在寻找的这种行为在http://www.w3.org/TR/css3-background/#the-background-size上非常明确地阐明：

  

如果两个值均为“自动”，则应使用图像的固有宽度和/或高度（如果有），如上所述，缺失尺寸（如果有）表现为“自动”。如果图像既没有固有宽度也没有固有高度，则其大小确定为“包含”。

然而，它并没有这样发挥，所以也许我错过了一些东西。

Answer 2

我认为这就是你的要求

demo

HTML

<div class="clientlist">
<div class="client"><div class="client1"></div></div>
<div class="client"><div class="client2"></div></div>
<div class="client"><div class="client3"></div></div>
<div class="client"><div class="client4"></div></div>
<div class="client"><div class="client5"></div></div>
  <div class="push"></div>
</div>

CSS是

body, html {
    height: 100%;
}

.clientlist {
    text-align: justify;
    display: inline-block;
    width: 100%;
}

.clientlist .client { 
    width: 18%; 
    height: 90px; 
    max-width: 200px;
    display: inline-block;
}

.clientlist .client div { 
    width: 100%; 
    height: 100%; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: contain;
} 

.push {
    display: inline-block;
    width: 100%;
    height: 0px;
}

.client1 { background-image: url(http://placekitten.com/200/300); }
.client2 { background-image: url(http://placekitten.com/200/200); } 
.client3 { background-image: url(http://placekitten.com/200/180); } 
.client4 { background-image: url(http://placekitten.com/220/200); } 
.client5 { background-image: url(http://placekitten.com/180/200); } 

我在div上设置max-width，而不是在背景大小中设置;但我认为结果是预期的结果。 为了均匀地创建div空间，我使用text-align：justify来使用技巧。为了这个工作;我需要HTML中的一个额外元素，即“推”类。