Cách css tự động resize ảnh nền theo thẻ div - Cover Art

Bước 1:Chúng ta phải tạo 1 thẻ div bao phủ ở ngoài.

Ví dụ: 

<div class="thumb" style="background-image: url(http://webfaver.com/thumbnail.jpg);"></div>

Bước 2: Điều chỉnh CSS

.thumb{
  /*position: relative;
  display: block;*/
    /*width: 200px;*/
    height: 300px;
    background-color: #3e3e3e;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

Hãy chú ý vào phần style cho .thumb . Trọng yếu của kỹ thuật này chính là sử dụng hai thuộc tính background-size  và background-position . Để làm cho ảnh nền tự resize vừa theo kích thước của thẻ div, ta dùng thuộc tính background-size  với giá trị là cover . Sau đó dùng background-position  với giá trị center  để căn giữa ảnh vào khung nhìn của thumbnail.