Tùy chỉnh kích thước hình ảnh trong CSS
Hình ảnh là một yếu tố quan trọng trong thiết kế website. Nếu bạn muốn thay đổi kích thước của hình ảnh mà vẫn giữ được tỉ...
Tùy chỉnh kích thước hình ảnh trong CSS
Hình ảnh là một yếu tố quan trọng trong thiết kế website. Nếu bạn muốn thay đổi kích thước của hình ảnh mà vẫn giữ được tỉ lệ khung hình ban đầu, bạn có thể sử dụng một số thuộc tính và giá trị trong CSS.
Hình ảnh được thay đổi kích thước trong CSS
max-width: 100%;: Thuộc tính này đảm bảo rằng hình ảnh không vượt quá kích thước của phần tử chứa nó.
height: auto;: Sử dụng thuộc tính này để tự động điều chỉnh chiều cao của hình ảnh dựa trên tỉ lệ khung hình ban đầu khi chiều rộng thay đổi.
Ví dụ, khi áp dụng CSS như trên, hình ảnh sẽ tự động co dãn hoặc thu nhỏ để vừa với kích thước của phần tử chứa nó, thường là một thẻ
Nếu bạn muốn hình ảnh có kích thước cố định nhưng vẫn giữ tỉ lệ khung hình ban đầu, bạn có thể chỉ định kích thước cụ thể cho một chiều (chiều rộng hoặc chiều cao) và sử dụng thuộc tính auto cho chiều còn lại. Ví dụ, nếu bạn muốn hình ảnh có chiều rộng cố định là 300px:
img { width: 300px; height: auto; }
Điều này sẽ giữ cho chiều rộng của hình ảnh là 300px và chiều cao sẽ tự động điều chỉnh để giữ nguyên tỉ lệ khung hình ban đầu.
Mục đích CSS thay đổi kích thước và bảo tốt tỉ lệ hình ảnh
Mục đích của việc sử dụng CSS để điều chỉnh kích thước và bảo tốt tỉ lệ hình ảnh là để tạo ra trải nghiệm hiển thị linh hoạt và thân thiện với người dùng trên nhiều loại thiết bị và kích thước màn hình khác nhau.
Hình ảnh được hiển thị trên nhiều loại thiết bị và kích thước màn hình khác nhau
Lựa chọn này đảm bảo rằng hình ảnh không bị thay đổi tỉ lệ chiều rộng và chiều cao ban đầu, giữ cho nó tự nhiên và thu hút người xem.
Mục tiêu cuối cùng là cung cấp một trang web responsive, nơi hình ảnh xuất hiện đẹp mắt và phù hợp trên mọi thiết bị.
Tối ưu hóa tải trang với hình ảnh phụ thuộc vào màn hình
Để tối ưu hóa tải trang, bạn có thể sử dụng thuộc tính srcset để cung cấp nhiều phiên bản hình ảnh với độ phân giải khác nhau tùy thuộc vào kích thước màn hình.
Với việc này, bạn có thể tránh việc tải hình ảnh có độ phân giải lớn cho các thiết bị có màn hình nhỏ hơn, giảm lưu lượng dữ liệu và cải thiện trải nghiệm người dùng.
Sử dụng CSS Filters để thêm hiệu ứng hình ảnh trực tiếp thông qua CSS. Bạn có thể điều chỉnh độ sáng, độ tương phản, màu sắc và nhiều yếu tố khác của hình ảnh mà không cần sửa đổi trực tiếp file hình ảnh.
Cách này giúp tăng sự linh hoạt và tiết kiệm thời gian trong việc chỉnh sửa hình ảnh. Cụ thể như sau:
Để giảm kích thước file hình ảnh và tăng tốc độ tải trang, hãy sử dụng định dạng hình ảnh WebP.
WebP cung cấp chất lượng hình ảnh tốt với kích thước file nhỏ hơn so với định dạng truyền thống như JPEG và PNG. Sử dụng thuộc tính type trong thẻ để chỉ định định dạng WebP.
Qua việc sử dụng CSS để thay đổi kích thước và bảo tồn tỉ lệ hình ảnh, chúng ta có thể tận dụng thuộc tính max-width, height: auto, object-fit, cùng với khả năng sử dụng srcset và định dạng hình ảnh hiệu quả như WebP, từ đó tối ưu hóa trải nghiệm người dùng trên mọi thiết bị và nâng cao hiệu suất tải trang.
