Search code examples
csscropbackground-size

How to disable cropping for the featured image on the homepage


I am building a website using wordpress and the theme is "Infinite Photography".
My problem is: on the homepage you see the featured images of all posts: www.konradfoerster.de/wordpress

When I change the size of the browser window, the images will be cropped from the middle. I don't want that.
However when you click on an image and open a single post and then change the size of the screen, the image scales but it does not crop. I want this behaviour for the homepage too!
I need the behavior like here: https://demo.kaliumtheme.com/photography/. Here when you make the browser window smaller, the images will be just scaled, not cropped.
How can I do this? I googled a lot, but could not find anything. For example I tried this one, but it did not work. disable cropping featured image in wordpress

Would appreciate any hints.
Edit: here is the screenshot of the document inspector. I think the styles, that apply for each image are in the class .acme-col-3. screenshot document inspector


Solution

  • .masonry-item.post-item {
        ...
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    

    https://developer.mozilla.org/en-US/docs/Web/CSS/background-size