3

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

问题：我使用的是流畅的响应式网格，因此当浏览器低于最大宽度（1000 像素）时，div 元素开始缩小。这会导致一些客户端徽标（背景图像）在边缘被剪裁。这是给定的。当击中父元素的边缘时，我希望这些图像开始按比例缩小。

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

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

话虽这么说，有没有办法利用背景大小而不放大它？或者有没有另一种方法来解决这个问题，让图像在他们的盒子里居中？

下面快速看一下代码：

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 */
4

2 回答 2

1

看起来这还不可能。

根据https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax上的语法示例，您会认为您可以按照“background-size: auto,自动，包含；" 但在我对 Chrome、FF 和 IE 的初始测试中，它并没有发挥这种作用。他们似乎都对 SVG 做得很好。Chrome 和 IE 因 PNG 而失败。所有这些都因 GIF 而失败。

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

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

但是，它并没有以这种方式发挥作用，所以也许我错过了一些东西。

于 2015-06-17T18:49:21.870 回答
0

我认为这就是您的要求

演示

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 的最大宽度，而不是真正的背景大小；但我认为结果是预期的结果。为了使 div 空间均匀，我使用了一个技巧，使用 text-align: justify。为此工作；我在 HTML 中需要一个额外的元素，即“推送”类。

于 2013-08-01T16:44:39.193 回答