Adapt object-fit, object-position by matching source

[AndyOGo]

Hy there,

I would really need to be able to change the additional attributes applied to the <img> tag, in particular those are object-fit, object-position and class.

I need this especially for professional art direction and to compensate for focal points of different renditions.

Suppose the following markup:

<picture>
  <source
    srcset="foo-sm.jpg, foo-sm@2.jpg x2"
    media="(min-width: 200px)"
    object-position="top center"
  />
  <source
    srcset="foo-md.jpg, foo-md@2.jpg x2"
    media="(min-width: 600px)"
    class="medium-addition-for-a-class"
  />
  <source
    srcset="foo-lg.jpg, foo-lg@2.jpg x2"
    media="(min-width: 900px)"
  />
  <img
    src="foo.jpg"
    srcset="foo@2.jpg x2"
    class="picture__img"
    alt="Foo image"
    object-fit="cover"
    object-position="center"
  />
</picture>

[eeeps]

Can't/shouldn't you do this in CSS?

.picture__img {
	object-fit: cover;
	object-position: center;
}

@media (min-width: 200px) and (max-width: 600px) {
	.picture__img {
		object-position: top center;
	}
}

@media (min-width: 600px) and (max-width: 900px) {
	.picture__img {
		/* whatever was going to apply to .medium-addition-for-a-class goes here */
	}
}

[AndyOGo]

@eeeps
Thank you for your quick answer. Ideally yes.
Though in case of an enterprise CMS, having an Art Director defining renditions it is impossible to know in advance how to style each rendition properly.
Hence it's should be possible for the art director to define the perfect object-fit, object-position attributes per rendition.

[eeeps]

IMO, that's a tooling problem, not a platform problem. I know the presentation/content divide is inherently muddied a bit by <picture> and respimg generally, but — HTML attributes that are just re-packaged CSS are an old and unfortunate <FONT COLOR="#FF0000">mistake</FONT>.

[marcoscaceres]

Agree with @eeeps: this is a limitation in tooling, not related to browser support or the standard. As such, I'm inclined to close this.

[AndyOGo]

@eeeps
@marcoscaceres
You are clever guys and I generally agree with you.
Please just ignore the standard for a moment.
Let's sit down and think about the user profit, especially the art director. What could be a goal he wants to archive?
From my observation one non plus ultra feature would be custom size/resolution dependent positioning for each rendition.
To make this work it must be possible to set object-position for the active <source>/srcset.
I see two possible solutions:

1. Output additional inline <style> tag with the appropriate CSS
2. Or much cleaner, revising the standard to make it more bullet proof and feature complete

I would call the feature:
Focal positioning per art direction

[AndyOGo]

@eeeps
@marcoscaceres
May I ask you to contribute to my argument.
I really want to stress your attention on custom focal positioning of art directions.
I think there should be a DRY solution for those renditions.
Yes it's true repackaged CSS props as HTML attributes are horrible, though please separate this case from the legacy mistakes.
Take clean code into your considerations, i.e.:

• I don't want to code a media query twice (once in <source> and once in CSS - it's not DRY)
• the <source> tag's goal is to provide an alternative image's src based on some condition, so it should also be possible to adapt all image related data by this exact same condition, like custom object-fit, object-position, etc. (code separation of concerns properly - do not clutter them)

IMHO, I'm pretty aware that the web is still awfully broken and very often misunderstood, there are rare competent professionals out there. But please take my feedback seriously and just give it a chance and think about it. Please consider a designers view point too and the freedom of art he expect to be able to be expressed.