Sử lý hiển thị ảnh không cùng kích thước và tỷ lệ trên website

Thủ thuật hiển thị ảnh không cùng kích thước trên website

Trường hợp một danh sách sản phẩm có các ảnh không cùng kích thước nhưng bạn phải đảm bảo chúng không gây vỡ trang web thì đây chính là cách khắc phục.

Demo

See the Pen Maintain Aspect Ratio Demo by iCoder.vn (@icodervn) on CodePen.0

Dựa theo Demo & link mình chia sẻ ở trên cảm thấy khá hay nên mình convert nó sang Less cho nào cần sử dụng:

Less Mixin

Kết quả:

Bạn nào không hiểu có thể comment bên dưới mình sẽ giúp đỡ nhiệt tình. Xin trân thành cám ơn đã xem bài viết này !