W3C home > Mailing lists > Public > public-css-archive@w3.org > September 2016

Re: [csswg-drafts] [css-grid] Stretching image grid items in both dimensions

From: Mats Palmgren via GitHub <sysbot+gh@w3.org>
Date: Sun, 25 Sep 2016 18:34:14 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-249437973-1474828453-sysbot+gh@w3.org>
> img { object-fit: cover; }

As you say, this leads to the image being clipped and is thus
not a solution to the problem at hand.

> img { justify-self: center; align-self: center; min-width: 100%; 
min-height: 100%; box-sizing: border-box }

This leads to the image overflowing when the window is very wide
or very narrow.  Thus it is not a solution to the problem at hand.
(also, having a margin doesn't seem to work?)
I've made a demo here:
https://people.mozilla.org/~mpalmgren/tests/grid/grid-align-center-min-width-demo.html
(Chrome has some problems when resizing this demo)

> img { foo-self: center; max-size: fill; }

Suggesting magic future tech to solve this problem isn't serious.
Besides, it still requires that you write the above workaround rule to
 get
what ought to be the default behavior.

> img { object-fit: contain; }

I've made a demo of `object-fit:contain` here:
https://people.mozilla.org/~mpalmgren/tests/grid/grid-object-fit-contain-demo.html
(Firefox has some problems with this demo at the moment)

I see the following problems:

1. Like with most `object-fit` values, it makes the image scale down
inside its content box.  This leads to gaps between the image
and the border.  (Try resizing the window to be very wide or
very narrow with the demo above.)  This leads to ugly layout
if you try to use a `border`, `box-shadow`, `outline` etc, since users
expects such decorations to wrap the image.

2. Since the image doesn't fill the content box, I suspect this
also leads to other problems... like CSSOM reporting the "wrong"
image size, the baseline not having any relation with the actual
image position etc.  Visual effects such as `opacity`, `filter` etc,
also applies in the gaps, i.e. "outside" the image proper.  I also
expect min/max/-width/-height will be awkward to use when
the image doesn't fill its content box.

3. It requires using `object-fit` which I suspect is a lesser known
property.

4. It requires adding a rule to get the behavior that really ought
to be the default: it's preferable if layout preserves the intrinsic
ratio by default (which some CSSWG members seem to agree
with in the earlier discussion about flex items).


My proposal doesn't have any of the above problems and it provides
the desired behavior by default.

-- 
GitHub Notification of comment by MatsPalmgren
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/523#issuecomment-249437973 
using your GitHub account
Received on Sunday, 25 September 2016 18:34:21 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:26:34 UTC