Scaling the image inside a container

Support
#1

Hi,

How can I scale an image in a container without scaling the container?

Thank you in advance!

#2

Hello @maravelosk,

Thanks for writing to us

There are several ways to fit the image to the container. If you are using the Image element you have an option of Object Fit.

The CSS object-fit property is used to specify how an <img> should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as “preserve that aspect ratio” or “stretch up and take up as much space as possible”.

  • fill - This is the default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
  • contain - The image keeps its aspect ratio, but is resized to fit within the given dimension
  • cover - The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
  • none - The image is not resized
  • scale-down - the image is scaled down to the smallest version of none or contain

Test-Page-Builder-Pro (15)

Hope it helps
Thanks

#3

Hi again,

Thank you for your answer. Also I would like to zoom in the image on hover without changing the size of the image/container.
How is this possible?
Thank you in advance!

#4

Hello @maravelosk,

You can use the Effect Module for the Zoom in effect. Please have a look at our video tutorial to learn more about how to set animation.

Hope it helps
Thanks

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.