Thay đổi Size ảnh Không Lo Bị Méo Với Thuộc Tính Object-fit CSS.

Skip to content

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

Thay đổi size ảnh không lo bị méo với thuộc tính object-fit CSS. Tiến Hoàng 13/03/201916/08/2019Web DevelopmentNo Comments on 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é.

css image fit, kich thuoc anh css, object fit trong css, resize anh css, resize image css, thu thuat css, thuoc tinh anh css Previous PostKích hoạt Gutenberg cho Custom Post Types trong WordPress 5+ Next PostRun javascript function when user finishes typing instead of on key up?

Related Post

Oh My Zsh: Nâng cao trải nghiệm terminal với giao diện đẹp và các plugin tăng hiệu suất! Git cherry-pick là gì? Cách sử dụng và ví dụ Git Rebase: Gộp nhiều commit thành một để tối ưu hóa lịch sử commit 11 tính năng JavaScript mới tuyệt vời trong ES13 (ES2022) CSS diệu kỳ: Các thuộc tính CSS mà bạn có thể chưa biết Auto deploy projects với GitHub Actions – sử dụng ssh-action WordPress Gutenberg Block Server Side Render Add, Upload image trong Gutenberg Block Development Tạo Block Controls – Block Toolbar và Settings Sidebar trong WordPress Gutenberg Làm quen với các components thường dùng khi tạo Gutenberg Block

Leave a Reply Cancel reply

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

Comment *

Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

Don't subscribe All new comments Replies to my comments

Δ

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

Search

Search

Khuyên dùng

Nhận 100$ miễn phí với Vultr

Shortener Link Fast & Easy

Recent Comments

• NTC on Hướng dẫn reset thời gian dùng thử JetBrains IDEs
• nekopoi on Tạo Web Service bằng PHP và MYSQL cho ứng dụng di động – Part 1
• Nguyễn Huy Hoàng on Hướng dẫn reset thời gian dùng thử JetBrains IDEs
• Tâm Duy on Tạo Blog đơn giản với Nuxt JS và WordPress API
• Đức Mạnh on Thêm Form tuỳ chỉnh tính giá sản phẩm trong Woocommerce WordPress
• NTC on Hướng dẫn reset thời gian dùng thử JetBrains IDEs

Recent Posts

• Oh My Zsh: Nâng cao trải nghiệm terminal với giao diện đẹp và các plugin tăng hiệu suất! 01/01/2024
• Git cherry-pick là gì? Cách sử dụng và ví dụ 04/07/2023
• Git Rebase: Gộp nhiều commit thành một để tối ưu hóa lịch sử commit 29/05/2023
• 11 tính năng JavaScript mới tuyệt vời trong ES13 (ES2022) 26/03/2023
• CSS diệu kỳ: Các thuộc tính CSS mà bạn có thể chưa biết 07/03/2022

Advertisement

Search