Question

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

Answer 1

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

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

Answer 2

是的，它仍然是首选。

很多人没有高速连接，移动设备也越来越普遍。

Answer 3

它不必是内联的 - 您可以在外部CSS中执行此操作。一些较旧的浏览器，如果你没有指定大小，只会将其视为0px;

Answer 4

总是最好使用CSS

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

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

我刚刚在Wordpress Stack Exchange和网站管理员堆栈上回答a similar question。我在这里发布它旨在澄清和帮助更多的人。（管理员/主持人：如果不允许这样做，请告诉我正确的帮助方式）。

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

此外，如果您对维度进行硬编码，那么它就会失败响应行为。如果你的布局没有响应，那没关系，但是如果你想保持一定的响应能力，你可以只使用CSS来实现结果。

大多数时候，使用宽度和max-width:100都可以完成工作，但Smashing Magazine的this post有一个有趣的技巧：不使用max-width：100％，你可以使用 Padding-Bottom Hack ：

“通过该技术，我们将高度定义为相对于宽度的度量。填充和边距具有这样的内在属性，我们可以使用它们为不具有任何内容的元素创建宽高比。   因为填充具有此功能，所以我们可以将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%;
}

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

8 个答案: