Kỹ thuật code thumbnail tự động resize ảnh theo thẻ div với HTML/ CSS

Có khi nào bạn code phần gallery, hay danh sách sản phẩm lại gặp phải vấn đề mỗi sản phẩm mỗi hình ảnh khác nhau, làm cho thumbnail của bạn không đồng nhất hay không?

Hoặc có vấn đề thực tế như thế này, khi khách hàng upload một ảnh lên, có một ảnh hướng ngang 16:9 và ảnh hướng dọc 3:4, tùm lum đủ kiểu hết thì bạn sẽ xử lý như thế nào? Mình cá là bạn sẽ phát điên khi xử lý nó khi chưa có kỹ thuật, vì nó sẽ bị bóp méo, vỡ và lệch đến khó chịu.

Đây là bài viết mà mình tích lũy được sao biết bao nhiêu lần phát điên lên khi code chúng, hãy theo dõi bài viết và lưu lại, vì những cái này bạn phải tự học, và mình ở đây là để rút ngắn thời gian nghiên cứu đến bạn.

Với một số kỹ thuật CSS cơ bản, bạn sẽ giải quyết được vấn đề này, và mình sẽ chia ra 2 cách, 2 kỹ thuật khác nhau, tùy vào tình huống sử dụng nhưng mình khuyên bạn nên tập trung vào cách 2 nhé.

Cách 1

Như mình mô tả, mình sẽ đưa vào 2 ảnh với hướng ngang dọc khác nhau để làm ví dụ nhé. Dưới đây là demo của cách 1:

Giải thích

Với kỹ thuật trên, mọi vấn đề đều được giải quyết, các hình ảnh resize rất ổn. Cụ thể các hình ảnh sẽ fix vừa vào khung (div) khi bạn quy ước trước.

Cụ thể các code HTML như sau:

<div class="news">
    <div class="article">
        <div class="thumb"></div>
        <div class="title">Tiêu đề bản tin.</div>
    </div>
    <div class="article">
        <div class="thumb"></div>
        <div class="title">Tiêu đề bản tin</div>
    </div>
    <div class="article">
        <div class="thumb"></div>
        <div class="title">Tiêu đề bản tin</div>
    </div>
</div>

Như các bạn thấy, các class thumb sẽ tự động resize theo các article. Và phần CSS sẽ như sau:

.news{
    width: 100%;
    height: auto;
    padding: 5px;
    background-color: #e6e6e6;
}
.article {
    width: 200px;
    height: 220px;
    display: inline-block;
    padding: 5px;
    margin-left: 10px;
    vertical-align:top;
}
.thumb {
    width: 200px;
    height: 150px;
    background-color: #3e3e3e;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
} 

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.

Cách này giải quyết được vấn đề rất tốt, nhưng mình phải cho ra cách 2 vì lý do sau:

<div class="news">
    <div class="article">
        <div class="thumb" style="background-image: url(https://i.imgur.com/EYZGWxO.jpg);"></div>
        <div class="title">Tiêu đề bản tin</div>
    </div>
</div>

Như bạn thấy, chúng ta phải thêm style trong html, theo nhiều trường hợp, cách này cần được khắc phục. Ý tưởng là bạn phải loại bỏ style và thêm thẻ <img src=""> để chứa ảnh.

Cụ thể bạn tham khảo cách 2 dưới đây:

Cách 2

Theo như mình tìm hiểu thì cách này là phổ biến và dùng nhiều nhất, bạn sẽ tổ chức các database dễ dàng hơn khi dùng cách này:

Và đây là code demo:

Như các bạn thấy, mọi việc xử lý đều diễn ra rất tốt. Vậy giải pháp ở đây là gì?

Giải thích

Trước tiên, bạn xem ảnh minh họa sau:

Như các bạn thấy, ta sẽ căn giữa và cắt các hình thu nhỏ có kích thước không đều trong một box chứa vuông.

Kỹ thuật này hoạt động bằng cách định vị hình ảnh sao cho góc trên cùng bên trái của nó nằm ở giữa thùng chứa. Sau đó, một bản dịch 2D di chuyển nó lên và để lại một nửa chiều rộng của chính nó.

Chìa khóa ở đây là các giá trị phần trăm được truyền cho hàm translate để căn giữa các hình ảnh ra. Cụ thể code như sau:

<div class="thumbnail"> 
  <img src="https://i.imgur.com/EYZGWxO.jpg" alt="Image" />
</div>
<div class="thumbnail">
  <img src="https://i.imgur.com/UKVMcP3.jpg" class="portrait" alt="Image" />
</div>

Ở đây mình dùng class thumbnail để chưa các hình ảnh, khi thumbnail thay đổi thì các tự ảnh sẽ tự cắt và resize. Phần css sẽ như sau:

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  float: left;
  margin: 10px;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

Mình dùng các translate để căn giữa hình, đó là chìa khóa của giải pháp này.

Lời kết

Thật ra cách nào cũng có ưu nhược điểm riêng của nó, bạn cần phải lựa chọn giải pháp phù hợp để thực hiện.

Trong series sau, mình sẽ hướng dẫn các bạn resize image bằng việc cắt ảnh bằng Javascript. Hãy luôn ủng hộ và theo dõi blog mình nhé.

Mong bài viết này hữu ích với bạn. Chúc các bạn thành công.

By Hiếu Quốc