如何在不知道图像将是什么的情况下定义<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" />