1

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

4

8 回答 8

2

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

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

于 2011-10-27T19:48:03.543 回答
1

是的，它仍然是首选。

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

于 2011-10-27T19:45:28.507 回答
0

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

于 2011-10-27T19:45:46.970 回答
0

使用 CSS 总是最好的

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

.myimg img {
width: 10px;
height: 10px;
}
于 2011-10-27T19:48:08.313 回答
0

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

于 2011-10-27T19:48:49.237 回答
0

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

于 2011-10-27T19:52:02.177 回答
0

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

于 2011-10-27T19:59:09.857 回答
-2

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

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

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

大多数时候，同时使用 width 和max-width:100will 完成工作，但是Smashing Magazine 的这篇文章有一个有趣的技术：您可以使用The Padding-Bottom Hack ，而不是使用 max-width:100% ：

“通过该技术，我们将高度定义为相对于宽度的度量。填充和边距具有这样的内在属性，我们可以使用它们为其中没有任何内容的元素创建纵横比。因为填充具有这种能力，我们可以将 padding-bottom 设置为相对于元素的宽度。如果我们也将 height 设置为 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%;
}
于 2015-09-17T02:27:40.527 回答