Reply To: Aspect Ratio Coding

[Support]

Hello, it’s because that design was created that way, with a fixed aspect ratio for the images, not the standard pattern, like 800×600. You can change the way the images shows, changing background-size, background-repeat, etc… Like this:

<div class="custom-slider-background overflow-hidden">
	<div class="custom-slider-background-image-stage-outer appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1600">
		<div class="custom-slider-background-image-stage">
			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img1); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img2); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img3); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img4); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
		</div>
	</div>
	<div class="custom-slider-background-image-stage-outer appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1600">
		<div class="custom-slider-background-image-stage reverse">
			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img4); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img3); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img1); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
			<div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img2); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div>
		</div>
	</div>
</div>

It will make the image appear, showing all parts of the image (not cropped), but the design will be different, the area of the images will be different, the height will be smaller.

Note: It’s impossible to show images with different aspect ratios in the same area showing all parts of the image.

---