Fluid Image properties

Hi
 
Currently the picture tag and img srcset only swap out images completely depending on the viewport size. There is, however a 
common use case which does not require swapping out an image but cropping it. People use CSS background-image for this use case which works but is not schematic or accessible.

It’s Fluid images: Images which have a fixed height but a flexible width. They are used with fluid grids where a column can extend a certain amount until the viewport hits the next breakpoint. An example is a banner, where the important content is in the center and the sides can get cropped.

The above use case could be covered by just one new attribute ‚crop‘ on a ’picture’ or ‚img' tag where the value specifies the anchor point in the crop axis. (As in background-position)
If the attribute is set, the image would be cropped instead of stretched if the aspect ratio of the element is different from the aspect ratio of the image file.

Since the value is dependent on the image content, it makes sense to add the tag to the markup and not to the CSS as a property.

This way it would be possible to use the semantically correct tags for this kind of images as well.

Regards
Simon

Received on Thursday, 10 December 2015 13:31:40 UTC