Thay đổi size ảnh không lo bị méo với thuộc tính object-fit CSS.

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é.

Gutenberg Block Attributes Cách tạo Gutenberg Block trong WordPress Tổng quan về Gutenberg trong WordPress Hơn 100 hình ảnh minh họa chất lượng cao, hoàn toàn miễn phí cho products của bạn 9 ứng dụng hữu ích cho Developers CSS Gap Space với Flexbox Làm tròn số trong PHP với ceil(), floor() và round() 10 mẹo để trở thành một nhà phát triển tuyệt vời Cách xóa một item khỏi Array trong JavaScript Giới thiệu và sử dụng CSS Variables

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.