Thuộc tính kết xuất hình ảnh CSS giúp chúng tôi thiết lập một thuật toán để chia tỷ lệ hình ảnh của chúng tôi.
Cú pháp
Cú pháp của thuộc tính hiển thị hình ảnh CSS như sau -
Selector {
image-rendering: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính kết xuất hình ảnh CSS.
<!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> Điều này cho kết quả sau
Ví dụ
<!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
}
</style>
</head>
<body>
<img id="one" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
<img id="two" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
<img id="three" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
<br/>
pixelated, smooth, crisp
</body>
</html> Điều này cho kết quả sau
