Fit image in Repeating Group Area

[heyshivamkr]

I have a repeating group with a minimum width of 250px and a fixed height of 450px.

I want to add an image inside the repeating group, but the actual image is too tall and exceeds the desired 300px height.

To address this, I’ve set the image’s fixed height to 300px (Awesome Screenshot).

However, it looks something like this: Awesome Screenshot

Ideally, I want the image to display as a zoomed-in version that adjusts based on the content width. This means only the top portion of the image that fits within the 300px height should be shown.

While setting “run mode-rendering” to zoom partially solves the issue, it unfortunately zooms in on the center of the image instead of the top.

Screenshot: Awesome Screenshot

Could someone please help me fix this and ensure the image zooms from the top?

[igor.tad]

Try html coded image container.
To create an HTML image container that zooms in on the image when the height exceeds a certain threshold, you can use CSS to apply a scaling transformation. Here’s an example code:

Zooming Image Container .image-container { width: 300px; /* Set your desired width */ height: 300px; /* Set your desired height */ overflow: hidden; }

.image-container img {
width: 100%; /* Ensure the image fills the container /
transition: transform 0.3s ease; / Smooth transition effect */
}

.image-container:hover img {
transform: scale(1.2); /* Increase image size on hover */
}

In this code:

• .image-container is a div that serves as the container for the image.
• The image inside the container is set to fill the container’s width and has a transition property for smooth scaling.
• When hovering over the container, the image inside it will scale up by a factor of 1.2, giving a zoomed-in effect.

You can adjust the width, height, and scaling factor as needed to suit your requirements. Additionally, replace "your-image.jpg" with the path to your actual image file.

[heyshivamkr]

Hi, I don’t want it to zoom on hover. I just want it to take the full width of the container and have a height of 300 pixels. Given that the actual height of the image is too long, it should show the first 300 pixels of the image.