应该在 html 中指定图像大小吗？答案

【问题标题】：Should image size be specified in html?应该在 html 中指定图像大小吗？
【发布时间】：2011-10-27 19:43:21
【问题描述】：

我记得很久以前对任何图像的宽度和高度进行硬编码是最好的做法（通常是在加载时分配适当的空间），但现在大多数人都在高速上，而且事情通常更加动态，什么是最好的为此练习？是否仍然首选任何内容图像使用 html 设置内联大小？

【问题讨论】：

标签： html image image-size

【解决方案1】：

使用 HTML 属性或在样式表中设置大小无关紧要，但您仍应指定图像的大小。

尽管现在图像的加载速度快了很多，但在显示页面和弹出图像之间仍然存在明显的延迟。在加载图像时页面布局发生变化仍然很烦人。

【讨论】：

【解决方案2】：

是的，它仍然是首选。

很多人没有高速连接，移动变得越来越普遍。

【讨论】：

【解决方案3】：

它不必是内联的 - 你可以在外部 CSS 中做到这一点。一些老的浏览器，如果不指定大小，只会把它当作0px；

【讨论】：

【解决方案4】：

使用 CSS 总是最好的

您可以像这样对图像的高度和宽度进行硬编码

.myimg img {
width: 10px;
height: 10px;
}

【讨论】：

很多人都说要使用 CSS。在图像是内容的一部分并且大小可变的情况下呢？我会为不同的图像创建一个自定义类吗？有一个稳定的图像大小类..（垂直/水平，不同的纵横比，小/中/大），或者只是在 html 中调整这些大小？

【解决方案5】：

您的图像文件本身应该是您希望它显示的大小，在大多数情况下，如果您特别担心加载缓慢！如果您有一个 500X800 像素的图像，而您只想显示为 100X200，请将其缩小！文件大小会小得多，因此加载速度会更快:)

【讨论】：

一般来说是的，虽然很多新的响应式技术不需要这个（尽管你仍然希望它不大于绝对必要）

【解决方案6】：

如果您想确保在图像未加载或文档加载期间包含空白区域，我会说是。但是，如果您使用这些属性缩放/调整图像大小，则不会，因为它会在浏览器上造成不必要的负载并导致图像失真。

【讨论】：

【解决方案7】：

如果您设计的是跨浏览器兼容性，那么您至少应该在 CSS 中为图像本身指定高度和宽度。如果没有专门为图像指定大小，我发现 FireFox、IE、Opera 等之间存在不一致。由于每个浏览器（更不用说不同的版本）处理对 HTML 标准的遵守情况不同。我发现有些浏览器会尽最大努力推断 HTML 设计者的意图，而其他浏览器只会抱怨第一个错误。如果您打算从平板电脑等移动设备查看网站，我也会推荐 em 大小，而不是像素或 %。我会说，但是我刚刚开始使用 HTML5，所以我不知道 HTML5 在图像方面的区别。

【讨论】：

【解决方案8】：

我刚刚在 Wordpress Stack Exchange 和 Webmaster Stack 上回答了 a similar question。我在这里发布它是为了澄清和帮助更多的人。（管理员/版主：如果不允许，请告诉我正确的帮助方式）。

并不意味着您需要在 html 中指定宽度和高度。这意味着您必须保留适当的空间，并且在加载图像时，浏览器不必重排和重新绘制页面。

此外，如果您对尺寸进行硬编码，它会破坏响应式行为。如果你的布局不是响应式的，没关系，但如果你想保持一些响应性，你可以只使用 CSS 来实现结果。

大多数时候，同时使用 width 和 max-width:100 就可以了，但是来自 Smashing Magazine 的 this post 有一个有趣的技术：你可以使用 Padding- 而不是使用 max-width:100%底部黑客：

“使用该技术，我们将高度定义为相对于宽度的度量。填充和边距具有这样的内在属性，我们可以使用它们为其中没有任何内容的元素创建纵横比。因为 padding 有这个能力，我们可以将 padding-bottom 设置为相对于元素的宽度。如果我们也将高度设置为 0，我们将得到我们想要的。 [...]

下一步是将图像放入容器中，并确保它填满容器。为此，我们需要将图像绝对定位在容器内，如下所示："

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

【讨论】：