Re: [css-images] Overconstrained image sizing and preserving aspect ratio: the object-sizing property

> On Jan 31, 2014, at 2:42 PM, Edward O'Connor <eoconnor@apple.com> wrote:
> 
> img {
>  max-width: 100%;
>  max-height: 100%;
> }
> 
> If Bob *did* explicitly set width and height, Alice could do the
> following to visually preserve the image's intrinsic aspect ratio:
> 
> img {
>  max-width: 100%;
>  max-height: 100%;
>  object-fit: contain;
> }

I've run into this sort of problem before, and it is almost always solved (for me) with this:

img {
    max-width: 100%;
    height: auto !important;
}

Thus, the height is always derived from the width, which is never more than the width of the container. The only problem is when the source code height is too tall for the page, but honestly, that has never come up in the work I do., especially since the container is usually 'height:auto' and can scroll. On vertical screens, the width is usually the first to run into the edge, and width is also often naturally less that the width of a page without needing to go wider (so 'width: auto !important' would not be a good choice).

I could see how it could be more of a problem when trying to adapt something like a portrait to a page that is both small and height constrained (such as iBook in page-flipping mode on an iPhone).

Received on Monday, 3 February 2014 17:23:43 UTC