我应该将高度和重量属性放在图像标签上，即使它们不是100％正确

Question

我正在开发一个可以上传图片的网络应用程序。我创建了各种尺寸的缩略图。可以说其中一个尺寸是240,240。

对于此缩略图，当我渲染图像时，我想按照建议使用“height”和“width”属性。但是，用户上传的图片可能非常高而且很瘦。在这种情况下，宽度不会是“240”。

此案例的建议高度和宽度属性是多少。或者我不应该担心缩略图的高度和重量属性。

Answer 1

不，您不应在width元素上添加不正确的height和img。但是，当您创建缩略图时， 所做的事情会输出正确大小的图像。例如，不要将图像从500 x 200向下缩放到240 x 96，而是创建一个新的透明图像240 x {{ 1}}并将缩放后的图像（240 x 240）放置在透明图像的中间。然后，您可以在96上指定width和height，而不会错误地拉伸任何图片。

Answer 2

高度和宽度属性告诉浏览器渲染画布上用于图像的空间尺寸。

如果实际图像不是那么大，它将被缩放以匹配。如果不是相同的宽高比，则图像将作为缩放的一部分进行拉伸或压缩。

您应该指定实际尺寸。

可能适当的是缩放缩略图以使最大尺寸为240.如果图像不是方形，则另一个尺寸应按相同比例缩放。例如，如果用户上传了480x100图像，您可以将其缩放到240x50，同时保留纵横比。

Answer 3

实际上并不需要这些属性，因此如果您不了解它们，请不要将它们放入。

你真的希望图像看起来扭曲吗？如果没有，最后你最终会改变高度和宽度，因此具有虚拟值的属性实际上不会用于任何有用的目的。我记得，出于性能原因推荐使用它们，因此浏览器一旦知道它们就不必再设置图像尺寸。

Answer 4

或者，如果可以确定其中一个维度是固定的，那么您应该设置该维度。

如果要构建包含非均匀内容的统一网格，可以在包含DIV /表格单元格/您拥有的内容上设置高度和宽度。