Horizontal images CSS

Custom CSS & Theme Design
1

What I’m trying to do

I really like banners on notes, and I’m trying to create a simple way to insert them. With this model: ![image | banner](image.png), I want to apply this snippet on the image:

img [alt*="banner"]{
    width: 100%;
    height: 50%;
    object-fit: cover;
}

I’m not good at CSS, I’m doing it with a lot of search.

Expected result

The image showed with its entire width, and a half of height, so that it looks like a banner on the top of the note. I thought object-fit: cover; would crop the image within its aspect ratio. It won’t work.

Things I have tried

The CSS above.

2

I’d look into SlRvb’s image adjustment snippet. There are a few options for banner type sizes, and lots of options for other things you may want to do ready to go. :smiley:

1 Like
3

@cReisz here’s another good css snippet for banner

3 Likes
4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.