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