Thiết kế web chuyên nghiệp và uy tín cho doanh nghiệp

http://www.web360do.vn

CSS cố định tỉ lệ ảnh NukeViet

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
CSS cố định tỉ lệ ảnh NukeViet

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

Tác giả bài viết: www.web360do.vn

logoBạn cần tư vấn thiết kế website Nukeviet?
Vui lòng liên hệ để được tư vấn!
0903.177.8770988 80 13 80  ĐĂNG KÝ NGAY
, . : 60