Re: aspect ratio as an attribute

I can't wait to develop a grid of 10,000 thumbnails in html with an image
block that contains containing this:

<img src="clock-demo-thumb-200.png"
       aspect="0.75"
      alt="Clock"
      srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w,
clock-demo-thumb-unknown.png 500w"
      aspectset ="0.75, 1, default"
      sizes="(min-width: 600px) 200px, 50vw">

Sigh....

Instead of where we loose sight on keeping the styling in the css and the
markup in the markup :( Sorry for being a purist. <- Kicked the dead horse
again :)

Paul.




On Thu, Dec 15, 2016 at 5:49 PM, Adam van den Hoven <adam@littlefyr.com>
wrote:

>
>
> On Thu, Dec 15, 2016 at 1:32 PM, Simon Pieters <simonp@opera.com> wrote:
>
>> On Thu, 15 Dec 2016 19:49:37 +0100, Greg Whitworth <gwhit@microsoft.com>
>> wrote:
>>
>> I submit that if you're using a CMS with non-technical content authors
>>>> who are not the designer (that is every commercial website ever created,
>>>> and most blogs run by non-technical folks with some free Wordpress theme)
>>>> then have no guarantee that the image as uploaded to the CMS will possess
>>>> the specified aspect ratio without some sort of distortion (either by CSS
>>>> or by some server process that crops the image accordingly).
>>>>
>>>
>>> I don’t understand how HTML solves this problem, whether it’s in CSS or
>>> HTML the hint will need to be provided by the site author and yes will
>>> probably be done via a server side process.
>>>
>>> In his original post, Alex said: "2) Only a hint during load. Once the
>>>> asset (metadata) is loaded successfully, the actual aspect-ratio of the
>>>> asset takes over. If the image fails to load, the image’s box retains the
>>>> hint. This fails gracefully, in cases of sloppy authoring. It also allows
>>>> conventional stretching via CSS, as Tommy Hodgins has requested. Basically,
>>>> it should do its job and then get out of the way." (emphasis mine)
>>>>
>>>
>>> This is a great point, that said there is nothing stopping us from
>>> making it so that the CSS property can accomplish this and we should ensure
>>> that the CSS property is able to do this. I would prefer to not have an
>>> HTML attribute that behaves differently than the CSS property.
>>>
>>
>> It would not need to behave differently. If there are good reasons to
>> have an HTML attribute (I recall someone mentioning lint checkers being
>> able to check HTML attributes but not so much parse and apply CSS), we can
>> define it as a "presentational hint" attribute that just maps to the CSS
>> property. A lot of HTML presentational attributes do this.
>>
>> We probably need to come up with something for <source> if we want to be
>> able to specify different aspect ratios for different <source>s, though...
>> Styling the source element itself is no good. :-)
>>
>
> srcset also poses a problem (there's no reason to expect that a particular
> sized resource has the same aspect ratio as the rest) but if the
> aspect-ratio that alex proposed only describes the aspect ratio of the
> resource in src, an add aspect-ratio-set that matches src values in src set
> with an aspect ratio, we'd have a consistent solution. the hyphation in the
> attribute names are a pain so i'd use aspect and aspectset
>
> So I'm suggesting (starting from the Mozilla docs on img
> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes>
> ):
>
> <img src="clock-demo-thumb-200.png"
>        aspect="0.75"
>       alt="Clock"
>       srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png
> 400w, clock-demo-thumb-unknown.png 500w"
>       aspectset ="0.75, 1, default"
>       sizes="(min-width: 600px) 200px, 50vw">
>
> The logic being, if only aspect-ratio exists, it applies to all the src
> values (src and srcset). If defined aspect-ratio-source only applies to the
> srcset items. the default keyword is "we don't know what it its", ie the
> current behaviour. If there are more srcset values than aspectset values,
> either apply the last value, or the aspect value or maybe start over from
> the first and apply them in turn. Not sure what's best. (I'm agnostic about
> implying computation with 4/3 vs 1.333)
>
> But that's possibly making it a LOT more complex than necessary?
>
> --
>> Simon Pieters
>> Opera Software
>>
>
>