• Thống kê tình hình
    Covid-19
    Thế giới
    • 6310545Ca nhiễm
    • 374717Tử vong
    • 2870826Khỏi bệnh
    Việt Nam
    • 328Ca nhiễm
    • 0Tử vong
    • 293Khỏi bệnh
  • 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

    11740 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ẻ

    avatar
    2 Comment threads
    1 Thread replies
    2 Followers
     
    Most reacted comment
    Hottest comment thread
    3 Comment authors
    Nguyễn Hoàng HậuPhùng ViệtHuy Kira Recent comment authors
      Theo dõi  
    mới nhất sớm nhất được yêu thích
    Thông báo cho
    Huy Kira
    Khách

    Form bình luận ngon hè 😀

    Nguyễn Hoàng Hậu
    Khách
    Nguyễn Hoàng Hậu

    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


    Tiếp theo

    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

    1017 lượt xem
    1 năm trước
    Share plugin trang trí noel cho website wordpress

    Share plugin trang trí noel cho website wordpress

    2270 lượt xem
    1 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

    3133 lượt xem
    3 năm trước
    Share code 10 giao diện trang báo lỗi 404 cực đẹp chuẩn responsive

    Share code 10 giao diện trang báo lỗi 404 cực đẹp chuẩn responsive

    8012 lượt xem
    3 năm trước
    Share 10 giao diện form đăng nhập responsive cực đẹp.

    Share 10 giao diện form đăng nhập responsive cực đẹp.

    38142 lượt xem
    3 năm trước
    Xem thêm