我将如何在<img>不知道图像将是什么的情况下定义尺寸

Question

我试图使每个用户的图像不同的个人资料图片缩略图。我想定义图像必须符合的尺寸。由于每个用户的图像都是不同的，如果不知道图像的文件名，我该如何编写HTML呢?

Answer 1

• 选项A:不定义大小;<img>将自动调整大小，并在图像加载时重新流化文档。不是很漂亮，但是如果你真的不知道尺寸是多少，你可以这样做。
• 选项B:输入高度或宽度;让浏览器在加载时缩放其他维度。如果你可以在你的布局中设置一个固定的高度或宽度，这是很好的。
• 选项C:使用CSS来指定最大宽度和最大高度。图像将被缩放到该矩形的内部。
• 选项D:指定CSS的高度和宽度。如果你有不同大小的图像，它们会被拉伸，这看起来很糟糕。
• 选项E:与D相同，但裁剪和/或调整缩略图的大小，以便您提前知道大小。如果你能做到的话，这是最好的选择。

Answer 2

使用CSS

给图片一个类，并写一个CSS声明，像这样:

<img class="profilepic" src="path/to/image" />

.profilepic {
    width:100px;
    height:100px;
}

如果你愿意，你也可以把样式内嵌。

<img style="width:100px;height:100px;" src="path/to/image" />