调整HTML图像大小的比例

Question

my site（右下角）中的卡片图像在Chrome和Firefox中的显示方式不同。在Chrome中，它的比率会保留，但Firefox中的比例会被扭曲。

如何应用图片本身的不断调整大小，跨浏览器（基本上可以执行Chrome现在发生的事情）

Answer 1

您的图片代码中包含以下内容：

width="100%" height="40%"

尝试仅指定其中一个（我建议宽度）以保持纵横比，否则图像将以某种方式拉伸或压扁以适应不太周到的浏览器上的那些尺寸。

Answer 2

理想情况下，您希望避免允许浏览器调整图像大小。不同的浏览器实现了不同的质量水平，这与您使用专用数字图像编辑器（Photoshop，Paint.NET等）所能达到的效果无法相比。最好在发布之前将其调整为所需的尺寸，然后明确设置实际的高度和宽度（以像素为单位）。