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

【问题标题】：How would I go about defining the dimensions of an <img> without knowing what the image is going to be在不知道图像将是什么的情况下，我将如何定义 <img> 的尺寸
【发布时间】：2014-07-07 00:33:18
【问题描述】：

我正在尝试制作个人资料图片缩略图，其中每个用户的图像都不同。我想定义图像必须符合的尺寸。由于每个用户的图像会有所不同，我将如何在不知道图像的文件名的情况下编写 HTML？

【问题讨论】：

标签： html image user-profile

【解决方案1】：

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

【讨论】：

【解决方案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" />

【讨论】：