Mình chắc chắn trong các bạn đều đã ít nhất 1 lần phải đau đầu vì vấn đề thay đổi kích thước mặc định của ảnh không theo tỉ lệ mà sao cho ảnh không bị vỡ. Đa số các bạn sẽ sử dụng Photoshop để giải quyết vấn đề trên. Hôm nay mình xin giới thiệu với các bạn một thuộc tính trong CSS3 để giải quyết vẫn đề trên. Đó chính là object-fit trong CSS3.
Object-fit trong CSS3.
Thuộc tính object-fit được sử dụng với mục đích thay đổi kích thước của <img> hay <video> sao cho phù hợp với vùng chứa nó.
Hãy xem ví dụ để hiểu rõ hơn nhé.
Ví dụ: Đây là một tấm ảnh gốc có kích cỡ 375 x 500.
Tuy nhiên nếu bạn muốn có hình với kích cỡ 375 x 375 thì nó sẽ trông như thế này.
Bức ảnh bị vỡ khi ta thay đổi kích thước không tỉ lệ với kích thước gốc.
Nhưng nếu bạn dùng thuộc tính object-fit: cover; thì sẽ xảy ra điều gì nhỉ ?
Bức ảnh hoàn toàn không bị vỡ mặc dù kích thước thay đổi không tỉ lệ với ảnh gốc.
Thật tuyệt vời đúng không nào.
Ngoài object-fit: cover; ra thì object-fit còn có các giá trị như:
object-fit:fill;object-fit:contain;object-fit:none;object-fit:scale-down;
Xem ví dụ này để hiểu hơn nhé các bạn.
Có thể bạn muốn xem: Kích hoạt Gutenberg cho Custom Types trong WordPress 5+.
Bài viết này mình có tham khảo trên w3schools. Các bạn nhớ like Fanpage để theo dõi các bài viết mới của mình nhé.