Resize and hard crop images

One thing I thought and would like to hear from you is if I put the dimensions in the right proportion in Customizer (620x330 for posts image and 380x200 for archive images), regenerate thumbnails and then apply the CSS below, would it work?

.featured-image img, .post-image img {
width: 94%;

Hi there,

for the single post image you can try this CSS:

.featured-image img {
    width: 100%;
    max-width: 781px;
    height: 400px;
    object-fit: cover;;
}

Hi David,

I am impressed with your solutions that always work. I created this topic beforehand and after 3 pages I could not find a solution and you already solves the problem with only one answer !! Now how can I adjust the archive images in the same way?

Thanks

You can apply a similar method like so:

.post-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

Not sure if you want to include a max-width in this case....

Hi David,

We had to make some adjustments to fit the image on different screen sizes. What do you think about them?

@media screen and (min-width: 768px) {
.post-image img {
width: 100%;
max-width: 380px;
height: 200px;
object-fit: cover;
}
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.post-image img {
width: 100%;
height: 300px;
object-fit: cover;
}
}
@media screen and (max-width: 480px) {
.post-image img {
width: 100%;
height: 200px;
object-fit: cover;
}
}
/*--------*/
@media screen and (min-width: 768px) {
.featured-image img {
width: 100%;
max-width: 781px;
height: 400px;
object-fit: cover;;
}
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.featured-image img {
width: 100%;
height: 320px;
object-fit: cover;;
}
}
@media screen and (max-width: 480px) {
.featured-image img {
width: 100%;
height: 250px;
object-fit: cover;;
}
}

Looks good to me.
You can reduce your CSS by applying any common properties to a CSS selector outside of a media query for example add this to apply everywhere ( replaces desktop ):

.post-image img {
    width: 100%;
    max-width: 380px;
    height: 200px;
    object-fit: cover;
}

Then in your media query just overwrite the change eg.

@media screen and (min-width: 481px) and (max-width: 767px) {
    .post-image img {
        height: 300px;
    }
}

Yes, you are right. This would be used instead:

.post-image img {
width: 100%;
max-width: 380px;
height: 200px;
object-fit: cover;
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.post-image img {
height: 300px;
}
}
@media screen and (max-width: 480px) {
.post-image img {
height: 200px;
}
}

.featured-image img {
width: 100%;
max-width: 781px;
height: 400px;
object-fit: cover;
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.featured-image img {
height: 320px;
}
}
@media screen and (max-width: 480px) {
.featured-image img {
height: 250px;
}
}

Looks good :)

Thanks David.

Just to leave registered this was the final CSS to be able to display full-width on mobile (used max-width in all @media screen)

.post-image img {
width: 100%;
max-width: 380px;
height: 200px;
object-fit: cover;
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.post-image img {
height: 300px;
max-width: 750px;
}
}
@media screen and (max-width: 480px) {
.post-image img {
height: 200px;
max-width: 500px;
}
}

.featured-image img {
width: 100%;
max-width: 781px;
height: 400px;
object-fit: cover;
}
@media screen and (min-width: 481px) and (max-width: 767px) {
.featured-image img {
height: 320px;
max-width: 790px;
}
}
@media screen and (max-width: 480px) {
.featured-image img {
height: 250px;
max-width: 500px;
}
}

Awesome - glad its working for you :)