Site logo

Archived topic

Blog Page read more button

26 replies · Started by iamarghya on March 30, 2022

Viewing posts 16–27 of 27

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?

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

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.

oh I see ok ok I got it

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

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.

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

maybe use a 12 / 9 aspect ratio ?

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

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 :)

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

Yes, please.

We would prefer that, thanks!

This archived topic is closed to new replies.