Thay đổi size ảnh thoải mái không lo “bị méo” với thuộc tính object-fit trong css

Thay đổi size ảnh thoải mái không lo “bị méo” với thuộc tính object-fit trong css

24,846 lượt xem
CHIA SẺ

Mình chắc chắn trong các bạn ai cũng đã ít nhất 1 lần phải đau đầu vì thay đổi kích thước mặc định của ảnh mà không theo tỉ lệ sao cho ảnh không bị vỡ. Đa số các bạn sẽ lựa chọn giải pháp dùng Photoshop để giải quyết vấn đề này. Hôm nay mình xin giới thiệu một thuộc tính trong CSS3 có thể giải quyết rắc rối này thay cho bạn. Đó là object-fit.


Object-fit trong CSS

Thuộc tính object-fit được sử dụng để thay đổi kích thước của <img> hay <video> sao cho phù hợp với vùng chứa của nó.

Hãy cùng xem qua ví dụ này để hiểu rõ hơn nhé.

Ví dụ: Đây là tấm ảnh gốc có kích thước 375×500.

 object-fit trong css


 

Tuy nhiên nếu bạn muốn hình có kích thước 375×375 thì nó sẽ trông như thế này.

 object-fit trong css

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 của ảnh


 

Nhưng nếu bạn dùng object-fit: cover;  thì điều gì sẽ xảy ra.

 object-fit trong css

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 kì diệu đú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 để tìm hiểu chi tiết hơn nhé.


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



Chia sẻ

Theo dõi
Thông báo cho
guest
4 Góp ý
sớm nhất
mới nhất được yêu thích
Inline Feedbacks
View all comments
Huy Kira
6 năm trước

Form bình luận ngon hè 😀

Nguyễn Hoàng Hậu
Nguyễn Hoàng Hậu
6 năm trước

Thuộc tính này rất hay. Từ giờ trở đi không cần phải crop resize hình nữa rồi. Thank FUVAVI BLOG nhiều

Ngô Hoàng Minh
Ngô Hoàng Minh
4 năm trước

Em thật sự đang rối, may mà đọc được post này. Cảm ơn anh nhiều lắm


Tiếp theo

BEM: phương pháp tổ chức CSS hiệu quả và linh hoạt nhất

BEM: phương pháp tổ chức CSS hiệu quả và linh hoạt nhất

1,825 lượt xem
1 năm trước
CSS Selector là gì? Những cách viết CSS có thể bạn chưa biết.

CSS Selector là gì? Những cách viết CSS có thể bạn chưa biết.

4,339 lượt xem
3 năm trước
Vì sao cần reset CSS khi bắt đầu một project

Vì sao cần reset CSS khi bắt đầu một project

6,189 lượt xem
6 năm trước
Share plugin trang trí noel cho website wordpress

Share plugin trang trí noel cho website wordpress

7,332 lượt xem
6 năm trước
Tổng hợp các thuộc tính cho text trong css

Tổng hợp các thuộc tính cho text trong css

7,937 lượt xem
7 năm trước
Xem thêm
4
0
Would love your thoughts, please comment.x