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

Giới thiệu và sử dụng CSS Variables Cách cài đặt MongoDB trên Ubuntu 18.04 Thêm Form tính giá sản phẩm trong Woocommerce WordPress BroadcastChannel API: Giao tiếp giữa các tab hoặc cửa sổ trong trình duyệt 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

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.

How to whitelist website on AdBlocker?

How to whitelist website on AdBlocker?

  1. 1 Click on the AdBlock Plus icon on the top right corner of your browser
  2. 2 Click on "Enabled on this site" from the AdBlock Plus option
  3. 3 Refresh the page and start browsing the site