Let’s assume,
- You have 10 items in carousel of size – 300 X 300px
- You are displaying 5 items in one view.
- The carousel block is placed in row which is 1170px wide container (this depends on your theme)
Now –
- Collective width of your carousel is approximately 1500px (5 images that are 300px wide)
- However, the carousel block is placed in a row which is 1170px wide row.
Obviously, all images can not be visible here in this case.
So, images will be scaled down in a responsive manner and your images will appear a bit smaller. When the width of an image is reduced – the height of an image is reduced too so that it will be proportionate.
More details –
- Assuming row container is 1170px wide
- Carousel block is supposed to display 5 images
Each image gets an area of 234px (approximately)
(1170px divided by 5 images)
And the individual images of 300 X 300px are resized to fit in the assigned 234px area.
Hope this clarifies.
