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

Hướng dẫn deploy project Nuxt JS lên VPS 😍 Giới thiệu PM2 – Trình quản lý các ứng dụng NodeJS Thêm meta tags cho website Nuxt JS Tạo Blog đơn giản với Nuxt JS và WordPress API Cài đặt Git trên Ubuntu 18.04 Hướng dẫn cài đặt Node.js trên VPS Ubuntu 18.04 Sử dụng JavaScript Fetch API với Async/Await Styling Placeholder Text của thẻ input với CSS Cài đặt và Active WebStorm 2019.2.4 với License key 50+ thuộc tính thú vị trong CSS

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.