简体   繁体   English

缩放多个图像以适合div内联?

[英]Scaling multiple images to fit inline in a div?

Is there an efficient way to scale a number of images so that they can fit inline inside a fixed-size div? 是否有一种有效的方法来缩放许多图像,以使它们可以内嵌在固定大小的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. 我假设可以通过使用javascript计算div宽度,除以图像数量(不包括填充),然后平均调整图像大小以保持其长宽比,来做到这一点,但我希望有一个更好的选择做到的方式。

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. 如果事先知道div的大小,则可以在HTML或CSS规则中的标签上设置图像的宽度。 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). 如果您不知道div的大小,但知道所需的图像数,则可以将每个图像的宽度设置为百分比(100 /图像数)。 If you declare only the width, the browser will preserve the aspect ratio of the images. 如果仅声明宽度,则浏览器将保留图像的长宽比。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM