[Resolved] Image object-position

[Roberto]

Hi, I’m trying to replicate this kind of info box, from this website. My problem is that when I’m trying to load and fit an image, I’m getting an ellipse, not a circle, even if I set 50% 50% dimension. You can see this here in the section “Come funziona”. How can I fix this?
Thank you in advance!

G.

[David]

Hi there,

select the Image Block, and in the With and Height settings, use the same Pixel value for both eg.

width: 150px
height: 150px

[Roberto]

Thank you so much! It was so easy…

Is there a way to “move” the image inside the Image Block? Only via CSS, right?

Thanks again

[Fernando]

Hi Giacomo,

To clarify, may we know what you mean when you say “move” the image inside the Image Block? Are you referring to the position? If so, yes, you’ll need custom CSS.

For instance, if you add change-image-position to the class list of the Image Block, and then add this CSS:

img.change-image-position {
    object-position: right top;
}

This should change its position. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

Let us know.

[Roberto]

Thank you!

[Fernando]

You’re welcome Giacomo!

[Author]

Posts