Question

Is there an efficient way to scale a number of images so that they can fit inline inside a fixed-size div?

I'm assuming it would be possible to do by using javascript to calculate the div width, divide it by the number of images (excluding padding) and then resizing the images equally to keep their aspect ratio but I'm hoping there is a better way to do it.

Was it helpful?

Solution

If you know the size of the div in advance, you can set the width of the images on the tags in your HTML or using a CSS rule. If you do not know the size of the div, but you know the number of images expected, you can set the width of each image to a percentage (100/number of images). If you declare only the width, the browser will preserve the aspect ratio of the images.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top