Thuộc tính trong CSS được sử dụng để phóng to kích thước của nội dung cho dù đó là văn bản thuần túy, hình ảnh, thành phần đồ họa, v.v. Phóng đại có thể là để tăng kích thước của phần tử hoặc giảm kích thước của phần tử, điều này hoàn toàn phụ thuộc vào yêu cầu của người dùng. Trong các phiên bản trước không có thuộc tính thu phóng cho chức năng thu phóng, người dùng đã viết logic của họ để triển khai chức năng thu phóng. Thuộc tính “thu phóng” được xác định trước này giúp giảm rất nhiều mã để viết. Trong chủ đề này, chúng ta sẽ tìm hiểu về CSS zoom Ghi chú. Thuộc tính “thu phóng” này có thể không được tất cả các trình duyệt cho phép do vấn đề tương thích. Các trình duyệt được hỗ trợ phổ biến là Internet Explorer, Safari và Chrome Ví dụ thời gian thực. Giả sử một số nhân viên của công ty xyz, một số người trong số họ bị cận nên không thể nhìn thấy những thứ nhỏ, vì vậy họ không thể xem nội dung trình duyệt nếu đó là cỡ chữ bình thường nên chúng tôi phải phóng to kích thước. Nếu một số người trong số họ có tầm nhìn xa nên họ không thể nhìn thấy những thứ lớn, vì vậy họ không thể nhìn thấy nội dung trình duyệt nếu đó là cỡ chữ bình thường nên chúng tôi phải thu nhỏ kích thước Bắt đầu khóa học phát triển phần mềm miễn phí của bạn Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác Thu phóng hoạt động như thế nào trong CSS?Thu phóng CSS hoạt động dựa trên giá trị thuộc tính được cung cấp cho thuộc tính thu phóng. Nếu chúng ta chuyển giá trị thuộc tính thu phóng như bình thường thì kích thước sẽ là 100%. Nếu chúng tôi chuyển giá trị thuộc tính thu phóng thành đặt lại thì nó sẽ đặt lại về kích thước ban đầu từ các giá trị tùy chỉnh của người dùng như 120%, 70%, 150%, v.v. cú pháp element
{
zoom:normal/reset/120%,70%/custom % values;
}
Giá trị được chấp nhận với thuộc tính thu phóng - thông thường. Nó không thay đổi kích thước bình thường của phần tử. Nó là giá trị mặc định
- cài lại. Nó đặt lại kích thước thực tế 100%
- giá trị % tùy chỉnh. Nếu bạn muốn cung cấp rõ ràng các giá trị tùy chỉnh như 70%, 80%, 120%, 150%, v.v. thì hãy sử dụng tỷ lệ phần trăm này với thuộc tính thu phóng. Nếu chúng ta đưa ra tỷ lệ phần trăm >100 thì kích thước nội dung sẽ tăng lên, nếu chúng ta đưa ra tỷ lệ phần trăm <100 thì kích thước nội dung sẽ giảm xuống
Ví dụ về thu phóng CSSDưới đây là các ví dụ sau đây đề cập dưới đây Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)
Giá
Xem khóa học 600+ Khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập Trọn đời
4. 6 (82.710 lượt xếp hạng) Ví dụ #1 – Phóng toMã số <!DOCTYPE html>
<html>
<head>
<!--CSS Styles-->
<style>
.p1
{
zoom: normal; /*100% or normal both are same*/
border: solid 2px green;
color: brown;
}
.p2
{
zoom:150%;/*zoom in means increasing content size with 150%*/
border: solid 2px green;
color: brown;
}
.p3
{
zoom:200%;/*zoom in means increasing content size with 200%*/
border: solid 2px green;
color: brown;
}
.p4
{
zoom:reset;/*reset means gives you the normal size of the content*/
border: solid 2px green;
color: brown;
}
h1
{
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction to zoom-in functionality</h1>
<p class="p1">The property in CSS is used to magnifying the size of the content whether it is plain text, images, graphical elements etc. Magnifying may be for increasing the size of the element or decreasing the size of the element, it is completed depends on user requirement. In earlier versions there is no zoom attribute for zoom functionality, user has write their own logic to implement zoom functionality. This predefined "zoom" attribute reduce lot of code to write.</p>
<p class="p2">Note: This "zoom" attribute may not allowed by all the browsers due to compatibility issue. Common supported browsers are Internet Explorer, Safari, and Chrome.</p>
<p class="p3">Real Time Example: Let suppose some xyz company employees some of them are having near sight so they can't see things which are small, so they can't see browser content if it is normal font size so we have to zoom in the size. If some of them are having far sight so they can't see things which are big, so they can't see browser content if it is normal font size so we have to zoom out the size.</p>
<p class="p4">Note: This "zoom" attribute may not allowed by all the browsers due to compatibility issue. Common supported browsers are Internet Explorer, Safari, and Chrome.</p>
</body>
</html>
đầu ra Ví dụ #2 – Thu nhỏMã số <!DOCTYPE html>
<html>
<head>
<!--CSS Styles-->
<style>
.p1
{
zoom: normal; /*100% or normal both are same*/
border: solid 2px navy;
color: red;
}
.p2
{
zoom:80%;/*zoom out means decreasing content size with 80%*/
border: solid 2px navy;
color: red;
}
.p3
{
zoom:60%;/*zoom out means decresing content size with 60%*/
border: solid 2px navy;
color: red;
}
h1
{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction to zoom-out functionality</h1>
<p class="p1">The property in CSS is used to magnifying the size of the content whether it is plain text, images, graphical elements etc. Magnifying may be for increasing the size of the element or decreasing the size of the element, it is completed depends on user requirement. In earlier versions there is no zoom attribute for zoom functionality, user has write their own logic to implement zoom functionality. This predefined "zoom" attribute reduce lot of code to write.</p>
<p class="p2">Note: This "zoom" attribute may not allowed by all the browsers due to compatibility issue. Common supported browsers are Internet Explorer, Safari, and Chrome.</p>
<p class="p3">Real Time Example: Let suppose some xyz company employees some of them are having near sight so they can't see things which are small, so they can't see browser content if it is normal font size so we have to zoom in the size. If some of them are having far sight so they can't see things which are big, so they can't see browser content if it is normal font size so we have to zoom out the size.</p>
</body>
</html>
đầu ra Ví dụ #3 – Phóng to và thu nhỏ hình ảnhMã số <!DOCTYPE html>
<html>
<head>
<!--CSS Styles-->
<style>
.img1
{
zoom: 40%; /*zoom out with 40%*/
border: solid 2px navy;
color: red;
}
.img2
{
zoom:50%;/*zoom out with 50%*/
border: solid 2px navy;
color: red;
}
.img3
{
zoom:100%;/*zoom in with 100%*/
border: solid 2px navy;
color: red;
}
.img4
{
zoom:120%;/*zoom in with 120%*/
border: solid 2px navy;
color: red;
}
h1
{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction to zoom-in and zoom-out functionality with images</h1>
<img src="d6.jpg" class="img1">
<img src="d6.jpg" class="img2">
<img src="d6.jpg" class="img3">
<img src="d6.jpg" class="img4">
</body>
</html>
đầu ra Sự kết luậnPhóng to CSS được sử dụng để phóng to nội dung của trang. Các thuộc tính thu phóng CSS cho phép các giá trị bình thường, đặt lại và tỷ lệ phần trăm. Hơn 100% dẫn đến tăng kích thước phần tử, nhỏ hơn 100% dẫn đến giảm kích thước phần tử và nếu bằng 100% là kích thước mặc định thông thường của phần tử Bài viết được đề xuấtĐây là hướng dẫn về thu phóng CSS. Ở đây chúng tôi thảo luận về cách thu phóng hoạt động trong CSS với các ví dụ về thuộc tính và lập trình để hiểu rõ hơn. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm – | 
