Possible to set a max-width for a background image? (want to scale background-image down, but not scale up)

前端 未结 2 818
死守一世寂寞
死守一世寂寞 2021-01-14 13:11

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 cent

2条回答
  •  南笙
    南笙 (楼主)
    2021-01-14 13:29

    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.

提交回复
热议问题