diff options
Diffstat (limited to 'files/zh-cn/web/html/element/img/index.html')
| -rw-r--r-- | files/zh-cn/web/html/element/img/index.html | 16 |
1 files changed, 8 insertions, 8 deletions
diff --git a/files/zh-cn/web/html/element/img/index.html b/files/zh-cn/web/html/element/img/index.html index a1f6530952..fef8ea66e5 100644 --- a/files/zh-cn/web/html/element/img/index.html +++ b/files/zh-cn/web/html/element/img/index.html @@ -243,7 +243,7 @@ translation_of: Web/HTML/Element/img <p>下面的示例将图像嵌入到页面中，且包含用于改善可访问性的备用文本。</p> -<pre class="brush: html notranslate"><img src="https://developer.mozilla.org/static/img/favicon144.png" +<pre class="brush: html notranslate"><img src="favicon144.png" alt="MDN logo"> </pre> @@ -254,7 +254,7 @@ translation_of: Web/HTML/Element/img <p>此示例建立在前一个示例的基础上，展示了如何将图像转换为链接。为做到这一点，将 <code><img></code> 标签嵌套在 {{HTMLElement("a")}} 之内。这时，备用文本应当描述链接所指向的资源，就像是文本链接一样。</p> <pre class="brush: html notranslate"><a href="https://developer.mozilla.org"> - <img src="https://developer.mozilla.org/static/img/favicon144.png" + <img src="favicon144.png" alt="Visit the MDN site"> </a></pre> @@ -264,9 +264,9 @@ translation_of: Web/HTML/Element/img <p>在这个例子中，我们包含了一个 <code>srcset</code> 属性，它引用了 MDN 标志高清版本；在高分辨率设备上，它将被优先加载，取代 <code>src</code> 属性中的图像。在支持 <code>srcset</code> 的{{glossary("User agent", "用户代理")}}中，<code>src</code> 属性中的图片被作为 <code>1x</code> 候选项。</p> -<pre class="brush: html notranslate"> <img src="https://developer.mozilla.org/static/img/favicon72.png" +<pre class="brush: html notranslate"> <img src="favicon72.png" alt="MDN logo" - srcset="https://developer.mozilla.org/static/img/favicon144.png 2x"></pre> + srcset="favicon144.png 2x"></pre> <p>{{EmbedLiveSample("Using_the_srcset_attribute", "100%", "160")}}</p> @@ -274,16 +274,16 @@ translation_of: Web/HTML/Element/img <p>在支持 <code>srcset</code> 的用户代理中，当使用 <code>w</code> 描述符时，src 属性会被忽略。当匹配了媒体条件 <code>(min-width: 600px)</code> 时，图像将宽 200px，否则宽 50vw（视图宽度的50%）。</p> -<pre class="brush: html notranslate"> <img src="/files/16864/clock-demo-200px.png" +<pre class="brush: html notranslate"> <img src="clock-demo-200px.png" alt="Clock" - srcset="/files/16864/clock-demo-200px.png 200w, - /files/16797/clock-demo-400px.png 400w" + srcset="clock-demo-200px.png 200w, + clock-demo-400px.png 400w" sizes="(max-width: 600px) 200px, 50vw"></pre> <p>{{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}}</p> <div class="blockIndicator note"> -<p>若要看到大小调整的效果，请<a href="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/img$samples/Using_the_srcset_and_sizes_attributes">打开单独的页面查看示例</a>，以便拖动窗口，调整内容区域的大小。</p> +<p>若要看到大小调整的效果，请{{LiveSampleLink('Using_the_srcset_and_sizes_attributes', '打开单独的页面查看示例')}}，以便拖动窗口，调整内容区域的大小。</p> </div> <h2 id="安全与隐私方面的考量">安全与隐私方面的考量</h2> |