Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zh-CN: update 'Responsive images' and 'Adding vector graphics to the web' #23682

Merged
merged 2 commits into from
Sep 21, 2024
Merged

zh-CN: update 'Responsive images' and 'Adding vector graphics to the web' #23682

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9e13c71
zh-CN: update 'Responsive images' and 'Adding vector graphics to the …
abing22333 Sep 19, 2024
2eb988f
Update files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_…
abing22333 Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .../learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ SVG 除了前面描述的以外还有其他优点：

### 快捷方式：`img` 元素

要通过 {{htmlelement("img")}} 元素嵌入 SVG，你只需要按照预期的方式在 src 属性中引用它。你将至少需要 `height` 或 `width` 属性中的一个（或者如果你的 SVG 没有固有的宽高比，则都需要）。如果你还没使用过 `img` 元素，请阅读 [HTML 中的图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)教程。
要通过 {{htmlelement("img")}} 元素嵌入 SVG，你只需要按照预期的方式在 src 属性中引用它。你将至少需要 `height` 或 `width` 属性中的一个（或者如果你的 SVG 没有固有的 {{glossary("aspect ratio","宽高比")}}，则都需要）。如果你还没使用过 `img` 元素，请阅读 [HTML 中的图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)教程。
abing22333 marked this conversation as resolved.
Show resolved Hide resolved

```html
<img src="equilateral.svg" alt="等边三角形" height="87px" width="100px" />
Expand Down Expand Up @@ -274,12 +274,12 @@ window.addEventListener("load", updateCode);
// 转而使其在当前光标位置插入一个制表符

textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
if (e.code === "Tab") {
e.preventDefault();
insertAtCaret("\t");
}

if (e.keyCode === 27) {
if (e.code === "Escape") {
textarea.blur();
}
};
Expand Down
8 changes: 6 additions & 2 deletions files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ web 刚面世时，这样的问题并不存在，在上世纪 90 年代早期至
3. 当媒体条件为真时，图像将填充的**插槽的宽度**（`480px`）

> [!NOTE]
> 对于插槽的宽度，你可以不提供绝对宽度（如 `480px`），而是提供相对于视口的宽度（如 `50vw`），但不能提供百分比。你也许已经注意到最后一个插槽的宽度是没有媒体条件的（当没有任何一个媒体条件为真时，它默认生效）。在浏览器成功匹配某一个媒体条件之后，剩下所有的条件都会被忽略，所以要注意媒体条件的顺序。
> 在 `sizes` 中，可以使用任何[长度值](/zh-CN/docs/Web/CSS/length)。例如，与其提供绝对宽度（如 `480px`），不如提供相对于视口的宽度（如 `50vw`），但不能提供百分比。你也许已经注意到最后一个插槽的宽度是没有媒体条件的（当没有任何一个媒体条件为真时，它默认生效）。在浏览器成功匹配某一个媒体条件之后，剩下所有的条件都会被忽略，所以要注意媒体条件的顺序。

有了这些属性后，浏览器会：

Expand All @@ -125,7 +125,9 @@ web 刚面世时，这样的问题并不存在，在上世纪 90 年代早期至

### 分辨率切换：相同的尺寸，不同的分辨率

如果你要支持多分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以使用 `srcset` 结合 x 描述符（一种更简单的语法），而不用 `sizes`，来让浏览器选择合适分辨率的图片。你可以参考这个示例 [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)（或查看[源代码](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)）：
假如有一张图片，在不同屏幕分辨率下，以相同的实际尺寸显示。通过提供高分辨率版本的图片，可以在高分辨显示器上提供更好的用户体验。

为此，你可以使用 `srcset` 结合 x 描述符（一种更简单的语法），而不用 `sizes`，来让浏览器选择合适分辨率的图片。你可以参考这个示例 [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)（或查看[源代码](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)）：

```html
<img
Expand All @@ -134,6 +136,8 @@ web 刚面世时，这样的问题并不存在，在上世纪 90 年代早期至
alt="Elva dressed as a fairy" />
```

请注意，即使图片仍然以相同的尺寸显示，但在高分辨率显示器下，可以看到等多细节。

![一张照片，内容是一个小女孩打扮成仙女，图像应用了老式相机胶片效果](resolution-example.png)

在这个例子中，下面的 CSS 会应用在图片上，所以它在屏幕上的宽度是 320 像素（也称作 CSS 像素）：
Expand Down