数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究应用 CSS 变换和缩放时保持图像质量
CSS `image-rendering` 属性帮助我们设置图像缩放算法。应用变换和缩放时，图像有时看起来模糊。为了改善图像质量，请使用 CSS `image-rendering` 属性。让我们看看如何保持图像质量。
语法
CSS `image-rendering` 属性的语法如下：
Selector {
image-rendering: /*value*/
}
以上，值可以是：
auto − 这是默认值，网页浏览器会自动选择缩放算法
smooth − 使图像颜色平滑。
high-quality − 提供更高质量的缩放
crisp-edges − 保持图像的对比度和边缘
pixelated − 如果图像放大，则考虑使用最近邻算法。
以下示例说明了 CSS `image-rendering` 属性。
示例
在这个示例中，我们尝试使用 `image-rendering` 属性的 `smooth`、`pixelated` 和 `crisp-edges` 值来增强图像质量。
#one {
image-rendering: smooth;
}
#two {
image-rendering: pixelated;
}
#three {
image-rendering: crisp-edges;
}
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
img {
height: 200px;
width: 200px;
}
#one {
image-rendering: smooth;
}
#two {
image-rendering: pixelated;
}
#three {
image-rendering: crisp-edges;
}
</style>
</head>
<body>
<img id="one" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<img id="two" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<img id="three" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
</body>
</html>
示例
在这个示例中，我们尝试使用 `image-rendering` 属性的 `smooth`、`pixelated`、`crisp-edges` 和 `high-quality` 值来增强图像质量。
#one {
image-rendering: pixelated;
}
#two {
image-rendering: smooth;
}
#three {
image-rendering: crisp-edges;
}
#three {
image-rendering: high-quality;
}
让我们看看这个例子：
<!DOCTYPE html>
<html>
<head>
<style>
img {
padding: 5%;
border-radius: 40%;
height: 20%;
width: 20%;
}
#one {
image-rendering: pixelated;
}
#two {
image-rendering: smooth;
}
#three {
image-rendering: crisp-edges;
}
#three {
image-rendering: high-quality;
}
</style>
</head>
<body>
<img id="one" src="https://tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" />
<img id="two" src="https://tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" />
<img id="three" src="https://tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" />
<br/>
pixelated, smooth, crisp, high quality
</body>
</html>
更新于：2023-12-26
1K+ 次浏览
广告