当前位置：文江博客话题详情

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

发布于 2024-12-12 01:59:35 字数 113 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雾里花 2024-12-19 01:59:35

使用 HTML 属性或在样式表中设置大小并不重要，但您仍然应该指定图像的大小。

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

回复收藏 0 原文

公布 2024-12-19 01:59:35

是的，它仍然是首选。

很多人都没有高速连接，而移动设备正变得越来越普遍。

回复收藏 0 原文

赤濁 2024-12-19 01:59:35

它不必是内联的 - 您可以在外部 CSS 中完成。一些较旧的浏览器，如果不指定大小，只会将其视为 0px；

回复收藏 0 原文

末が日狂欢 2024-12-19 01:59:35

最好使用 CSS

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

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

Its always best to use CSS

You could hardcode the image height and width like this

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

回复收藏 0 原文

柏拉图鍀咏恒 2024-12-19 01:59:35

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

回复收藏 0 原文

满意归宿 2024-12-19 01:59:35

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

回复收藏 0 原文

鹤仙姿 2024-12-19 01:59:35

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

回复收藏 0 原文

荒路情人 2024-12-19 01:59:35

我刚刚在 WordPress Stack Exchange 和 Webmaster Stack 上回答了类似问题。我发在这里是为了澄清和帮助更多的人。（管理员/版主：如果不允许这样做，请让我知道提供帮助的正确方法）。

并不真正意味着您需要在 html 中指定宽度和高度。这意味着您必须保留适当的空间，并且加载图像时，浏览器不必回流并重新绘制页面。
此外，如果您对维度进行硬编码，它会破坏响应行为。如果您的布局不是响应式的，也没关系，但如果您想保持一定的响应性，则可以仅使用 CSS 来实现结果。
大多数时候，同时使用 width 和 max-width:100 就可以完成工作，但是 Smashing Magazine 的这篇文章有一个有趣的技术：您可以不使用 max-width:100%，而是使用Padding-Bottom Hack：
“通过该技术，我们将高度定义为相对于宽度的度量。填充和边距具有此类内在属性，我们可以使用它们为不包含任何内容的元素创建宽高比。
因为padding有这个能力，所以我们可以将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%;
}

I just answered a similar question on Wordpress Stack Exchange and also on Webmaster Stack. I am posting it here intending to clarify and help more people. (admins/moderators: if this isn't allowed, let me know the proper way to help).

doesn't really means you need to specify width and height in the html. What it means is that is you gotta reserve te proper space and when the image is loaded, the browser doens't have to reflow and repaint the page.
Besides, if you hardcode the dimensions, it kinds of defeats responsive behaviour. If your layout is not responsive, it's ok, but if you want to keep some responsiveness, you could use only CSS to achieve the results.
Most of time, using both width and max-width:100 will do the work, but this post from Smashing Magazine has an interesting technique: instead of using max-width:100%, you can use The Padding-Bottom Hack :
"With the technique, we define the height as a measure relative to the width. Padding and margin have such intrinsic properties, and we can use them to create aspect ratios for elements that do not have any content in them.
Because padding has this capability, we can set padding-bottom to be relative to the width of an element. If we also set height to be 0, we’ll get what we want. [...]
The next step is to place an image inside the container and make sure it fills up the container. To do this, we need to position the image absolutely inside the container, like so:"

.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%;
}

回复收藏 0 原文

~没有更多了~