[Support request] Resize and hard crop images

[Hilton]

Hi,

The images on my site were originally about 620px wide. I wanted them to fit the full width of the post, which is 750px and so I used the CSS below:

@media screen and (min-width: 1025px) {
.featured-image img, .post-image img {
width: 94%; }}

As the height of the images is variable, I needed something that could hard crop them so that they were 400px high, and that this ratio should be kept on the archive pages as well, that in my case would be 380x200px.

Thanks

[Hilton]

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

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

[David]

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;;
}

[Hilton]

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

[David]

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….

[Hilton]

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;;
}
}

[David]

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;
    }
}

[Hilton]

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;
}
}

[David]

Looks good 🙂

[Hilton]

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;
}
}

[David]

Awesome – glad its working for you 🙂

[Author]

Posts