“必须”在 img 标签上写宽度和高度？ [关闭]答案

【问题标题】：A "must" to write width and height on img tags? [closed]“必须”在 img 标签上写宽度和高度？ [关闭]
【发布时间】：2013-08-31 19:56:26
【问题描述】：

以及我读过的其他文章，在 img 标签中写入宽度和高度是“必须”的。但也许现在这种情况发生了变化，我猜响应式网页设计已被弃用？

所以，我正在使用 Twitter Bootstrap 并发现在 img-tags 上使用固定宽度和高度会出现问题。在我的 CSS 中，我使用：

width: 100%; height: auto

然后它会在每台设备上正确缩放。但是当我不提供图像的宽度和高度值时，加载时间或其他什么明显变慢？此外，还有其他方法可以解决这个问题，就像 Twitter Bootstrap 一样？

【问题讨论】：

在我看来你问错了问题。你问过“X 是否必要？”当你观察到不做 X 的缺点时。询问如何修复 X 的实现会更有益。通过询问“X 是否必要？”，你得到的只是固执己见的答案，而不是解决您要解决的实际问题。

【解决方案1】：

我会在桌面视图的元素上指定它，但对于响应式视图，请使用您建议的代码覆盖。还要确保你把display: block放在那里。当您进行这种响应式收缩时，这有助于 IE ;)

宽度/高度属性帮助的原因是它意味着浏览器可以在图像加载之前将页面布局，否则会出现“跳转”效果。

必须将您的图片调整为您将要显示的最大尺寸。您的用户没有理由只为浏览器调整图像大小而下载额外的字节。

【讨论】：

【解决方案2】：

说你应该给图像高度/宽度的原因是；浏览器在图像之前渲染高度/宽度，因此在加载图像之前在网站上保留一个空容器......所以网站的结构在加载网站时不会受到干扰。

嗯。当我通过媒体查询创建响应式布局时，我使用相同的技术。但是根据我的经验，对于较小的设备，为较小的设备重新调整大小（通过 CSS）相同的大图像是不明智的。所以，我为较小的设备使用了重新调整大小的较小版本的图像以实现快速加载......因此它使网站的加载速度相对较快。

您可以使用其他技术通过 Photoshop 等工具优化网络图像，这将提高速度，因为图像大小会因此减少很多。

最后但并非最不优化的代码以及删除不必要的标签和 css。

祝你好运！

【讨论】：

【解决方案3】：

不是必须的。而且，正如您自己所解释的那样，它不适合响应式页面。浏览器确实使用了宽度/高度，因此会影响性能，但出于响应性考虑，通常值得这样做。

【讨论】：

任何在不知道“响应性”真正指的是什么的情况下阅读您的答案的人都具有讽刺意味。
@BoltClock 你能解释一下吗？
@Cruncher：开个玩笑（我承认这是个很蹩脚的玩笑）。在the original RWD writeup 之前，“响应性”通常表示 UI 响应性，这意味着它是一个与性能相关的术语。现在，只有在网页设计中，“响应性”才意味着完全不同且与性能无关的东西。这里的答案是为了“响应能力”而牺牲性能，这对外行来说是没有意义的。