[Support request] Resize and hard crop images

Home Forums Support Resize and hard crop images

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1035783
    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

    #1035797
    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%;

    #1036377
    David
    Staff
    Customer Support

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

    #1036440
    David
    Staff
    Customer Support

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

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

    #1036522
    David
    Staff
    Customer Support

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

    #1036529
    David
    Staff
    Customer Support
    #1036538
    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;
    }
    }

    #1036636
    David
    Staff
    Customer Support

    Awesome – glad its working for you 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.