Re: Fluid Image properties

For this very reason my friend and I created a concept called "Asset
Template Guides". We've been slammed this year, but we're working on a few
blog posts on the topic. Asset Template Guides are inspired by traditional
print design to be a solution to predict reflow of content in a responsive
environment, while giving visual designers more creative freedom when
designing for responsive sites, and improving communication between
developer and designers. You can watch this full video for an overview on
the concept: https://www.youtube.com/watch?v=CzhJ-iRvwJo


Happy TGIF-eve
*Kevin Mack*

On Thu, Dec 10, 2015 at 4:50 AM, Simon Bächler <b@chler.com> wrote:

> 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
>
>