可以为背景图片设置最大宽度吗？ （想要缩放背景图像，但不放大） [英] Possible to set a max-width for a background image? (want to scale background-image down, but not scale up)

问题描述

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

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

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

我也可以只使用背景大小，并且客户端标志有一个最大宽度设置。但是，这会导致客户端列表为响应式布局转到额外的行。我想避免这个，但对我来说，这是唯一的工作解决方案。

这就是说，有没有反正利用background-size而不增加？

下面快速查看代码：

HTML

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; } / *五个客户端行* / 
 .clientlist .client div {
 width：100％; 
 height：100％; 
 background-position：center center; 
 background-repeat：no-repeat; } / *垂直居中背景图片* / 
 .clientlist .client .bcs {background-image：url（../ images / client-bcs.jpg）; } / *更像这样定义image * / 
  

解决方案

根据 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax ，你会认为你可以做一些background-size：auto，auto，contain;行。但它没有以我的方式在我的初步测试Chrome，FF和IE。他们似乎都很好用SVGs。 Chrome和IE无法使用PNG。

对我来说，看起来我们正在寻找的这种行为在 http://www.w3.org/TR/css3-background/#the-background-size ：

如果两个值均为'auto'，则应使用图像的固有宽度和/维度（如果有的话）表现为如上所述的自动。如果图片既不具有内部宽度，也不具有内部高度，则其大小按照包含确定。

't玩这种方式，所以也许我错过了一些东西。

I am using a series of a div elements to display a set of client logos. The reason for using background images was to allow the images to be vertically and horizontally centered within the div, instead of a more hack-y solution using img elements.

The issue: I am using a fluid, responsive grid, so when the browser is below the max width (1000px), the div elements begin to shrink. This causes some of the client logos (the background images) to clip at the edges. This is a given. I would like to have these images begin to scale down when the hit the edges of the parent element.

background-size: contain partially solves this. The only drawback is that it also scales the background image's size above 100%, which is an issue. It stretches the logo which is not a good solution for me.

I could also just not use background-size, and have the client logos have a max-width set. This, however, causes the client list to go to extra rows for responsive layouts. I would like to avoid this, but to me this is the only working solution.

That being said, is there anyway to utilize the background-size without having it scale up? Or is there another way to approach this that would keep the images centered within their box?

Here's quick look at the code:

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

解决方案

It doesn't look like this is possible yet.

Based on the syntax examples on https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax, you would think you could do something along the lines of "background-size: auto, auto, contain;" but it didn't play out that way in my initial testing on Chrome, FF and IE. They all seem to do fine with SVGs. Chrome and IE fail with PNGs. All of them fail with GIFs.

To me, it seems like this behavior we are looking for is spelled out pretty clearly on 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’.

However, it doesn't play out that way so maybe I'm missing something.

这篇关于可以为背景图片设置最大宽度吗？ （想要缩放背景图像，但不放大）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！