• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <img>

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

    浏览器支持

    所有浏览器都支持

    示例

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

    属性

    属性描述45
    alttext定义有关图形的短的描述。45
    srcURL要显示的图像的 URL。45
    align
    • top
    • bottom
    • middle
    • left
    • right
    规定如何根据周围的文本来对齐图像。不支持。请使用 CSS 代替。4
    borderpixels定义图像周围的边框。不支持。请使用 CSS 代替。4
    heightpixels %定义图像的高度。45
    hspacepixels定义图像左侧和右侧的空白。不支持。请使用 CSS 代替。4
    ismapURL把图像定义为服务器端的图像映射。45
    longdescURL一个 URL,指向了描述该图像的文档。不支持。4
    usemapURL定义作为客户端图像映射的一幅图像。请参阅<map>和<area>标签,了解其工作原理。45
    vspacepixels定义图像顶部和底部的空白。不支持。请使用 CSS 代替。45
    widthpixels %设置图像的宽度。45

    使用 CSS 为<img>附加样式

    <img>是一个替换元素。它的display属性的默认值是inline,但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的,使得它就像inline-block一样。你可以为<img>设置border/border-radiuspadding/marginwidthheight等等的 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>元素没有widthheight属性,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

    技术信息

    内容类别流式内容、短语内容、嵌入内容,段落内容元素. If the element has ausemapattribute, it also is a part of the 交互内容元素 category.
    允许的内容无,它是一个空元素。
    标签省略必须有开始标签,不可有结束标签。
    允许的父元素接受嵌入内容的任意元素。
    允许的 ARIA 角色任意
    DOM 接口HTMLImageElement

    定义和用法

    <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">

    使用srcsetsizes属性

    在支持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">

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

    上篇:<audio>

    下篇:<track>