为<picture>源图片自动添加图片宽高

【问题标题】：Automatically add image width and height to <picture> source images为<picture>源图片自动添加图片宽高
【发布时间】：2022-12-06 18:42:33
【问题描述】：

有一种使用 vscode 快捷方式为元素上的图像添加宽度和高度的快速方法 1. CMD + Shift + P 2.Emmet 更新图像大小。但是这个技巧对 html 元素不起作用。是否有快捷方式或 vscode 扩展来实现这一点？我主要使用 element，所以这将大大提高生产力。

我尝试搜索 vscode 文档，据我所知没有图片元素或浏览器扩展的快捷方式。

【问题讨论】：

标签： html image responsive-design

【解决方案1】：

很高兴您想要提供尺寸属性。它允许浏览器在图像仍在加载时保留空间，从而减少布局偏移。

不过，<picture> element does not have width and height attributes。

但是，您应该在 <picture> 中有一个 <img> 元素来设置大小。 VS Code 确实为这些属性提供了自动完成功能。

<img> 元素有两个用途：
它描述图像的大小和其他属性及其表示。
– 也来自 MDN

您还应该在该图像上提供一个 alt 属性以提供可访问的后备。
<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg"
            media="(orientation: portrait)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" width="298" height="332" alt="A surfer in a wetsuit riding a wave">
</picture>

【讨论】：