object-position property

[harshdoesdev]

object-position determines where the content of an element (like an image or video) is positioned within its container.

An implementation of object-position in fastn should look like this (We can omit object- prefix and just use position just like we have omitted it in the case of object-fit cause for element position we are using top, left and anchor anyways):

;; Setting the object position of the image

-- ftd.image:
src: $assets.files.images.teapot.png
object-position: top|bottom|left|right|center

;; Setting top and left object positions individually 

-- ftd.image:
src: $assets.files.images.teapot.png
object-position.top.px: 50
object-position.left.px: 20

MDN: object-position

cc: @amitu @xypnox

[amitu]

In general I want a property if we want all possible values. Cant we say top-left or something is the only meaningful value for this property, which works in most cases and people dont really need to change it. If so we should not add a property, and simply use the right value when generating HTML. Whats the use case for allowing all possible values?

[xypnox]

I agree that there are several cases where positioning the background to top left makes sense. For example, below the cloud background's position is correct even for vertically larger viewports:

However, the same property causes problems in backgrounds that are not meant to be positioned at top left. For example below the desert comes in the middle which could have been solved by positioning bottom left:

Although this is only one example, many can be created for other positions. (Left/Right - Gradient or flames coming from a direction.)

Finding out which is the correct default value in this case will fail as it will ruin one design or the other, whichever default position is chosen.

[amitu]

Since we do not have to worry about backward compatibility right now, lets pick the sane default. Also if there is largely only two cases we believe we need, lets only allow those two, and allow others on demand. Like what I am saying is lets be very cognisant of use case, instead of just adding features. Once something gets added, its hard to remove. We are not aiming for CSS compatiblity, we are aiming for ease of learnability for someone how is not CSS expert. So if we two values like top-left and center is all they care about we do only these two.

Also we can merge the two keys, maybe fit: top-left and fit: center should be used instead of fit: cover, and object-position: top-left. CSS is only for inspiration, fastn is a different thing with its own judgement/opinions.