Có nhiều phương pháp cố định kích thước ảnh theo tỉ lệ, trong bài này mình hướng dẫn 02 cách thường dùng nhất là dùng background-size cover và dùng thuộc tính object-fit của ảnh.

Dùng background-size cover

Mã HTML:

<div class="img-responsive-wrap">    <a href="yourlink" class="img-inner" style="background-image: url('image-src.jpg');"><img alt="Image Alt" title="Your Title" src=""></a></div>

Mã CSS:

.img-responsive-wrap {    position: relative;    height: 0;    padding-bottom: 60%;}.img-responsive-wrap .img-inner {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    display: block;    background-size: cover;    background-position: center center;}.img-responsive-wrap .img-inner img {    display: none;}

Giải thích:

• Thẻ img-responsive-wrap có tác dụng tạo ra một khu vực rộng bằng 100% khu vực chứa nó, chiều cao theo tỉ lệ với chiều rộng theo thuộc tính padding-bottom
• Thẻ img-inner là thẻ luôn rộng và cao bằng 100%, có nền là ảnh muốn hiển thị với thuộc tính background-size: cover
• Cho ẩn ảnh bên trong img-inner

Cách này thông dụng hơn vì tương thích nhiều trình duyệt hơn. Chi tiết xem tại đây

Dùng object-fit

Mã HTML:

<div class="img-responsive-wrap">    <a href="yourlink" class="img-inner" style="background-image: url('image-src.jpg');"><img alt="Image Alt" title="Your Title" src=""></a></div>

Mã CSS:

.img-responsive-wrap {    position: relative;    height: 0;    padding-bottom: 66%;}.img-responsive-wrap .img-inner {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    display: block;}.img-responsive-wrap .img-inner img {    object-position: center;    object-fit: cover;    width: 100%;    height: 100%;}

Giải thích:

• Thẻ img-responsive-wrap có tác dụng tạo ra một khu vực rộng bằng 100% khu vực chứa nó, chiều cao theo tỉ lệ với chiều rộng theo thuộc tính padding-bottom
• Thẻ img-inner là thẻ luôn rộng và cao bằng 100% thẻ cha.
• Ảnh hiển thị cố định width: 100%;, height: 100%; và thêm thuộc tính object-fit: cover;

Cách này ít thông dụng hơn vì không tương thích trên IE mọi phiên bản. Chi tiết xem tại đây