Tùy chỉnh kích thước hình ảnh trong CSS
Để thay đổi kích thước của hình ảnh trong CSS và vẫn giữ tỉ lệ khung hình (tức là không làm biến đổi tỉ lệ chiều rộng và chiều cao ban đầu), bạn có thể sử dụng một số thuộc tính và giá trị sau:
- max-width: 100%;: Điều này sẽ đảm bảo rằng hình ảnh không vượt quá kích thước của container bên ngoài.
- 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ụ:
img {
max-width: 100%;
height: auto;
}
Khi áp dụng CSS như trên, hình ảnh sẽ co dãn hoặc thu nhỏ tự động để vừa với phần tử chứa nó (thường là một <div> hoặc một vùng khác).
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, bạn có thể xác đị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 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 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 CSS điều chỉnh kích thước và duy trì 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.
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 nó giúp 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.
img {
max-width: 100%;
height: auto;
object-fit: cover;
}
/* HTML */
<img src=”image-large.jpg” alt=”Large Image” srcset=”image-small.jpg 600w, image-medium.jpg 1000w, image-large.jpg 2000w”>
Áp dụng hiệu ứng hình ảnh với CSS Filters
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. Chi tiết như sau:
img {
max-width: 100%;
height: auto;
object-fit: cover;
filter: grayscale(50%) brightness(120%);
}
Dùng WebP để giảm kích thước File
Để 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 các định dạng truyền thống như JPEG và PNG. Sử dụng thuộc tính type trong thẻ <source> để chỉ định định dạng WebP.
<picture>
<source srcset=”image.webp” type=”image/webp”>
<img src=”image.jpg” alt=”Image”>
</picture>
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ể rút ra rằng các thuộc tính và kỹ thuậ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, mang lại khả năng 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.