automatic sizing of vertical images

Hey icarogioiosi,
Typically, forcing a 600*800 image to 1360*768 will stretch the image, is this what you want?

Best regards,
Mike

Hi,

Thank you for the inquiry.

Where can we check these images? Please provide the link to the page in question so that we can inspect the images. Have you tried applying a maximum height to the image?

@media only screen and (max-width: 1366px) {
	/* Add your Mobile Styles here */
	.image {
		max-height: 700px;
	}
}

Adjust the “.image” selector accordingly.

// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hey!

Thank you for the inquiry.

We were not able to edit the settings because the account above is not an admin. This should work for the first image in the portfolio, but it might slightly distort the image:

.avia-image-container.av-m3m81k8l-37e2592474b1f3aa9f01e6b56eac1db5 img.avia_image {
    max-height: 600px;
}

If you want to apply this to specific images, try adding a Custom CSS Class name (e.g., av-limit-image-height) in Advanced > Developer Settings, then replace the css code with this:

.av-limit-image-height img.avia_image {
    max-height: 600px;
}

For more info about css class names, please check this link: https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Regards,
Ismael

Hi,

for example horizontal photos are visible in their entirety because they are automatically adapted to the screen,

Some images appear fully visible on mobile because their aspect ratio differs from the phone browser’s viewport. In portrait mode, the viewport is taller than most images with a landscape proportion, making them fully visible. Please note that images automatically adjust to occupy the space of their parent container. If you want to control how the images are resized and make them fully visible on certain screens with different aspect ratio, you need to apply a custom css class name to them and adjust their width or height manually. For example, you can set the image width to 50%, and the image will resize proportionally to its height.

@media only screen and (max-width: 1366px) {
     /* Add your Mobile Styles here */
     .av-limit-image-height img.avia_image {
        width: 50%;
        margin: 0 auto;
    }
}

Again, you need to apply the class name “av-limit-image-height” to the Image element. However, focusing on whether the images are fully visible on load may not be necessary, as users can still scroll to view the content.

Best regards,
Ismael