Hướng dẫn css print image size - kích thước hình ảnh in css

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

.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;
}

Dùng background-size cover

Mã HTML:

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 {
      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;
  }

  1 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

  .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;
  }

  2
• Thẻ

  .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;
  }

  3 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

  .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;
  }

  4
• 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:

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 {
      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;
  }

  1 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

  .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;
  }

  2
• Thẻ

  .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;
  }

  3 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

  .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;
  }

  4
• 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