Thủ thuật CSS cố định tỉ lệ ảnh

Hướng dẫn các nhà phát triển giao diện cố định kích thước ảnh hiển thị trên giao diện thích hợp với mọi kích thước ảnh đầu vào mà mọi kích thước màn hình

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