如何自动调整图像大小以适应“div”容器？

Question

如何自动调整图像大小以适应“div”容器？如何自动调整大图像的大小，使其适合于较小宽度的div容器，同时保持其宽度：高度比？例如：stackoverflow.com-当图像插入编辑器面板时，图像太大，无法适应页面，图像就会自动调整大小。

Answer 1

目前，对于固定大小的图像(如JPEG或PNG文件)，无法以确定的方式正确地完成此操作。

要按比例调整图像大小，必须设置任一高度或宽度为“100%”，但不是两者兼而有之。如果两者都设置为“100%”，您的图像将被拉伸。

选择高度还是宽度取决于图像和容器的尺寸：

1. 如果您的图像和容器都是“人像形状”或“景观形状”(分别比宽或宽高)，那么不管高度还是宽度是“%100”。
2. 如果您的图像是肖像，而您的容器是景观，则必须设置

   height="100%"

   在图像上。
3. 如果您的图像是景观，而您的容器是肖像，则必须设置

   width="100%"

   在图像上。

如果您的图像是SVG，这是一个可变大小的矢量图像格式，您可以进行扩展以适应容器自动发生。

您只需确保SVG文件在<svg>标签：

height
width
viewbox

大多数矢量绘图程序在导出SVG文件时都会设置这些属性，所以每次导出时都必须手动编辑文件，或者编写脚本来完成。