Re: Fluid Image properties

Hi Simon,
When you say "Images which have a fixed height but a flexible width." you
mean something like this
<http://www.letshuttle.com/content/shuttleto/en_US.html> (or the pure CSS
method <http://www.elcssar.com/ejemplos/responsive/flexibleIMG.html>)?
About creating a "new attribute *crop, what it would be nice is allow* clip
CSS attribute to use *percentual clipping or add max-clip and min-clip
attributes*.
I think will solve the problem you are pointing out.

However I don't think banners is an information piece which format you can
really solve cropping as is a marketing tool to get ppc, and design
requirements are standard for every advertiser, and could be quite a few of
them every month and they aren't even directly contracting the space with
you in most of the cases.


We should look for an scalable method to allow the content writers and
marketing staff to include only the content an do not have to worry about
anything else.
For example *why do we have to load the js code* used to get a banner that
will never be shown in a mobile, and though *will be never be used in that
context*.

I suppose some ppc providers are already working in responsive banners
based on js methods, but aside concrete cases, now talking in wider terms,
I think *the ideal will be to serve only those resources that are required
for every context*: images, js, css... *just as mobile apps do*.

any suggestions on this matter guys!?


*Daniel Abril*
UI/UX Designer & Semantics Lover

On Thu, Dec 10, 2015 at 10: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
>
>