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

修改：流式图像方法部分 #8183

Merged
merged 1 commit into from Mar 11, 2021
Merged

修改：流式图像方法部分 #8183

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 article/2021/responsive-images-different-techniques-and-tactics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@

如果用户的设备分辨率高于 `640×480` 像素，则将渲染 **large-kitten.jpg** 图像，否则，将渲染 **small-kitten.jpg** 图像。最重要的是，具有低分辨率设备的用户不会感到图像加载时间有任何延迟，而具有高分辨率设备的用户不会感到图像质量有任何问题。

### 2. 流体图像方法
### 2. 流式图像方法

这种方法的核心在于使用同一图像的不同尺寸，而不是使用不同的图像。

例如，我们可以通过给出相对比例的图像大小而不是给出精确的像素值来实现简单的流体图像。最常用的方法是 `max-width:100%`。
例如，我们可以通过给出相对比例的图像大小而不是给出精确的像素值来实现简单的流式图像。最常用的方法是 `max-width:100%`。

```html
<img
Expand All @@ -67,7 +67,7 @@

> 如你所见，上面的图像可以自由缩放并适应浏览器窗口大小。在文章头图较大时，该方法将是理想的选择。

此外，还有一种使用流体图像的高级方法，可以使用图像的宽度和页面的整体宽度来计算尺寸。
此外，还有一种使用流式图像的高级方法，可以使用图像的宽度和页面的整体宽度来计算尺寸。

例如，考虑一个 `1200px` 宽的网页和一个 `500px` 宽的图像。然后，按照如下方法计算图像在页面上占用的空间：

Expand Down