[Resolved] Blog Page read more button

[iamarghya]

Hey, an extra question David.
In the link see my featured images are in 16/9 and object-fit cover but the total images are not showing Idk I think the cover is not working? Can u check and suggest to me what to do?

[iamarghya]

And seeing this type of design I wanted, that overlay type effect in the photo how to achieve that in CSS?

[David]

1. Your CSS is wrong:

.blog #main .inside-article .post-image {
    aspect-ratio: 16/9;
    object-fit: cover;
    margin-bottom: 20px;
    overflow: hidden;
}

Its targeting the .post-image container – object-fit only works on replaced or media elements. Therefore you should target: .blog #main .inside-article .post-image img

2. if applied to an img – object-fit: cover; forces the image to fill the space – and if the original image is a different aspect ratio it will crop the image. If you want to change an images aspect-ratio and keep all the image – then you don’t use object-fit – BUT the image will be distorted.

[iamarghya]

oh I see ok ok I got it

[iamarghya]

ya, It worked but the image is distorted can u tell me what is the best size for a featured image?

[David]

There is no ‘best’ size – as long as they are all the same size / aspect-ratio then you can adjust to suit. If you like the 16:9 aspect ratio then use that.

[iamarghya]

I have almost every picture in 1200 * 900 px what is adjusted to suit?

[David]

maybe use a 12 / 9 aspect ratio ?

[iamarghya]

Hey I also asked this question here I think it slipped out but can u help me with that?

[Ying]

Hi there,

Not sure what does this mean:

Hey I also asked this question here I think it slipped out but can u help me with that?

I thought your question Blog Page read more buttonhas been answered.

Let me know 🙂

[iamarghya]

Oh actually yes but I have also asked a different question should I ask it on a different topic?

[Ying]

Yes, please.

We would prefer that, thanks!

[Author]

Posts