Community forum for knowledge and support

Updated last year

Aligning a 16:9 Image to the Right Edge of a 9:16 Wrapper

At a glance

A community member is trying to align a 16:9 ratio YouTube thumbnail image to the right edge of a 9:16 wrapper, but it defaults to the left edge. Another community member suggests using object-position: right to achieve this. The community members discuss the issue and provide a code snippet to try, which seems to solve the problem. However, there is no explicitly marked answer in the comments.

Useful resources

Hey everyone,

Is it possible to force an image to align to it's right edge whilst the absolute property is applied?

I have a 16:9 ratio YouTube thumbnail image that I would like to cover a 9:16 wrapper, but it defaults to align the image to its left edge, and I need it to align to the right edge.

Any ideas?

Here is the read only link: https://preview.webflow.com/preview/selligence?utm_medium=preview_link&utm_source=desi[…]3ff124e83d&pageId=6549efb40309c92c54db5733&workflow=preview

Thanks in advance!

O
J
12 comments

I believe you can use object-position: right. Haven’t checked the link though but I define absolute images inside diva like this to get the right part of the image to show.

Can't seem to make this work in any way - see the image below for the current settings (new card set up using one of the Relume components)

Post the most up to date read only link and i will take a look at your structure for you 👍

.layout423_image {
    position: absolute;
    width: 100%;
    height: 100%;
    clear: none;
    align-self: auto;
    object-fit: cover;
    object-position: right;
}

That pins it to the right:

I think thats what you are after?

Yep, that's a lot better!

Do I need to add this as code, or just in the settings?

I “think” you can do it here:

Ahhhhh that's where it is!

haha no prpoblem at all. Tiny little dots hiding a good control point.

Add a reply
Sign up and join the conversation on Slack