We're merging with GenerateBlocks! Learn more here.

[Support request] image quality when scaling

Please login to receive premium support.

Support for the free plugin can be found here.

Home › Forums › Pro Support › image quality when scaling

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 2, 2020 at 12:59 pm #22107
    heinrich
    Participant

    Hello team,

    I have noticed that the quality gets a bit worse when scaling the image. Is it possible to define a square image section with css?

    November 3, 2020 at 2:56 pm #22167
    Tom
    Keymaster

    Hi there,

    How are you scaling the image?

    It’s definitely possible to use CSS along with object-fit to “crop” an image.

    November 5, 2020 at 1:17 am #22230
    heinrich
    Participant

    Hi Tom,
    I have set the image width and height to 460px in the lists.
    But the images appear a bit blurred. How should the CSS code look like so that the images are sharp but the boxes are still square?

    November 6, 2020 at 2:16 pm #22267
    Tom
    Keymaster

    It may be necessary to increase that size, then reduce the visible size of the image with CSS. This will force more pixels to be squeezed into the desired area of the image (this is what “retina” is).

    For example, if your list has a custom class: my-custom-class

    You could set the image width and height to 700px, then do this:

    .my-custom-class .wp-show-posts-image img {
    width: 460px;
}
    November 7, 2020 at 2:55 am #22291
    heinrich
    Participant

    Hi Tom,

    I tried your code but it didn’t work.
    Please have a look: http://boombox.kinsta.cloud/

    Thanks for your support.

    November 9, 2020 at 2:46 pm #22400
    Tom
    Keymaster

    Hi there,

    Is the CSS still active? I’m not seeing it at the moment. Just to confirm, are we targeting the “Unsere Projekte” list?

    November 10, 2020 at 1:20 am #22439
    heinrich
    Participant

    Hi Tom,

    This code is on the site: crop-image-to-fit = the css class of the list.

    .crop-image-to-fit .wp-show-posts-image img {
    width: 460px !important;
    height: 460px !important;
    }

    What am I missing? I really appreciate your help.

    November 10, 2020 at 3:21 pm #22468
    Tom
    Keymaster

    I’m not seeing that CSS rendering on the site at the moment. How are you adding it? Can you try deactivating Autoptimize?

    November 10, 2020 at 3:29 pm #22478
    heinrich
    Participant

    done, autoptimize is deactive. we are using simple css to add code.

    November 11, 2020 at 3:31 pm #22508
    Tom
    Keymaster

    I ran your site through the CSS validator here and it seems like you have quite a few CSS parse errors: https://jigsaw.w3.org/css-validator/#validate_by_uri

    Looks like it’s coming from this: .wp-block-eedee-block-gutenslider

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