This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 29238 - There's no way to size a background to always fill or always fit (while maintaining aspect ratio)
Summary: There's no way to size a background to always fill or always fit (while maint...
Status: NEW
Alias: None
Product: CSS
Classification: Unclassified
Component: Backgrounds and Borders (show other bugs)
Version: unspecified
Hardware: All All
: P2 critical
Target Milestone: ---
Assignee: fantasai
QA Contact: public-css-bugzilla
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2015-10-24 23:36 UTC by teo8976
Modified: 2015-10-24 23:36 UTC (History)
0 users

See Also:

Attachments

Description teo8976 2015-10-24 23:36:43 UTC 
With background-image (and background-repeat: no-repeat), you can have a given dimention of the bg image match the same dimention of the container, and the other dimention computed automatically according to the image aspect ration. That is, you can do:

  background-size: 100% auto;

or

  background-size: auto 100%;

However, if you don't know in advance whether the aspect ratio of the image is wider or narrower than that of the container, you can 
NEITHER:
- obtain the minimum size that completely fills the container while maintaining the image's aspect ratio (hence having one and only one of the dimensions cropped), that is, obtain the maximum scale factor between matching the width and matching the height
NOR:
- have the image at the maximum size that fits completely in the container matching whichever dimension restricts it the most (hence leaving empty space in one and only one dimension), that is, obtain the minimum scale factor between matching the width and matching the height.

These are super basic needs and it's unbelievable that there's no way to achieve them with any combination of background-size and background-position.

Having to program this in JavaScript is totally ridiculous.