<img>

HTML<img>元素将一份图像嵌入文档。

浏览器支持

所有浏览器都支持

示例

<img src="smile.gif" alt="smile" />

属性

使用 CSS 为<img>附加样式

<img>是一个替换元素。它的display属性的默认值是inline，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像inline-block一样。你可以为<img>设置border/border-radius、padding/margin、width、height等等的 CSS 属性。

<img>没有基线（baseline），这意味着，当在一个行内格式的上下文（an inline formatting context）中使用vertical-align: baseline时，图像的底部将会与容器的文字基线对齐。

You can use theobject-positionproperty to position the image within the element's box, and theobject-fitproperty to adjust the sizing of the image within the box(for example, whether the image should fit the box or fill it even if clipping is required).

根据图像文件的类型，图像可能会有一个原始分辨率（intrinsic dimension）或者叫原始宽高。对于一些类型的图像，原始分辨率并不是必要的。比如说，SVG图像，如果它们的根<svg>元素没有width或height属性，SVG 图像就可以没有原始分辨率。

译者注：原始分辨率/原始宽高是图像的固有属性，基本上就是图像本身的分辨率/宽高。只与图像本身有关，与<img>元素的属性、显示分辨率等等无关。点阵图像通常有且只有一个随图片宽高变化的原始分辨率，而矢量图像可以没有。不过，编辑矢量图像时，通常可以手动/编辑器自动为其设置原始分辨率。

安全与隐私方面的考量

虽然<img>元素的用途是很单纯（原文：innocent）的，但是它们可对用户安全和隐私造成不良的后果。SeeReferer header: privacy and security concernsfor more information and mitigations.

可访问性考量

使用有实际意义的备用描述

alt属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。如果因为图像没有等价的文本描述，alt属性只得不写或留白，那么可以考虑使用其他方法来呈现图像试图传递的内容。

别这样

<img alt="image" src="penguin.jpg">

这样好

<img alt="一只站在沙滩上的跳岩企鹅。" src="penguin.jpg">

当图像上没有alt属性时，一些屏幕阅读器可能会读出图像的文件名。如果文件名不能代表图像的内容，甚至是一团乱码，这可只能造成令人迷惑的体验。

• An alt Decision Tree • Images • WAI Web Accessibility Tutorials
• Alt-texts: The Ultimate Guide — Axess Lab
• How to Design Great Alt Text: An Introduction | Deque
• MDN Understanding WCAG, Guideline 1.1 explanations
• Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0

title属性

Thetitleattribute is not an acceptable substitute for thealtattribute. Additionally, avoid duplicating thealtattribute's value in atitleattribute declared on the same image. Doing so may cause some screen readers to announce the description twice, creating a confusing experience.

Thetitleattribute should also not be used as supplemental captioning information to accompany an image'saltdescription. If an image needs a caption, use thefigureandfigcaptionelements.

The value of thetitleattribute is usually presented to the user as a tooltip, which appears shortly after the cursor stops moving over the image. While thiscanprovide additional information to the user, you should not assume that the user will ever see it: the user may only have keyboard or touchscreen. If you have information that's particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of usingtitle.

• Using the HTML title attribute – updated | The Paciello Group

技术信息

定义和用法

<img>标签定义图像。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中，图像的"align","border","hspace"以及"vspace"不赞成使用。在 HTML 5 中，不再支持这些属性。

实例

如何插入图像：

<img src="smiley.gif" alt="smiley face" height="42" width="42">

示例

备用文字

下面的示例将图像嵌入到页面中，且包含用于改善可访问性的备用文本。

<img src="https://developer.mozilla.org/static/img/favicon144.png"
     alt="mdn logo">

图像链接

此示例建立在前一个示例的基础上，展示了如何将图像转换为链接。为做到这一点，将<img>标签嵌套在<a>之内。这时，备用文本应当描述链接所指向的资源，就像是文本链接一样。

<a href="https://developer.mozilla.org">
  <img src="https://developer.mozilla.org/static/img/favicon144.png"
       alt="visit the mdn site">
</a>

使用srcset属性

在这个例子中，我们包含了一个srcset属性，它引用了 MDN 标志高清版本；在高分辨率设备上，它将被优先加载，取代src属性中的图像。在支持srcset的用户代理中，src属性中的图片被作为1x候选项。

 <img src="https://developer.mozilla.org/static/img/favicon72.png" 
      alt="mdn logo" 
      srcset="https://developer.mozilla.org/static/img/favicon144.png 2x">

使用srcset和sizes属性

在支持srcset的用户代理中，当使用w描述符时，src 属性会被忽略。当匹配了媒体条件(min-width: 600px)时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。

 <img src="/files/16864/clock-demo-200px.png" 
      alt="clock" 
      srcset="/files/16864/clock-demo-200px.png 200w,
          /files/16797/clock-demo-400px.png 400w"
      sizes="(max-width: 600px) 200px, 50vw">

若要看到大小调整的效果，请打开单独的页面查看示例，以便拖动窗口，调整内容区域的大小。