3

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

Có khi nào bạn làm giao diện cho trang tin tức. Bạn chăm chút cẩn thận cho mỗi tin có một thumbnail đẹp đẽ vuông vức. Đến khi bàn gian cho khách hàng thì ôi thôi! Cái thì khách hàng up ảnh 16:9, có cái thì xoay dọc lại kiểu ảnh chân dung 3:4 … Bạn phát điên lên vì giao diện hoặc vỡ be bét hoặc ảnh thumbnail bị kéo lệch xấu xí do không đúng tỉ lệ.

Với một kỹ thuật CSS đơn giản, bạn có thể giải quyết vấn đề này bằng cách tự động scale ảnh cho fix đúng theo kích thước quy định, và tập trung hiển thị vào chính giữa ảnh nền, giúp đảm bảo người đọc vẫn xem được nội dung ảnh, người viết bài có thể upload bất kì ảnh với tỉ lệ nào vẫn không làm vỡ giao diện.

Demo kỹ thuật CSS Cover Art

Bấm vào hai nút trong demo để bật tắt hiệu ứng CSS tạo cover cho ảnh thumbnail tin tức.

Giải thích

Như bạn đã xem ở demo trên, khi kích thước và tỉ lệ ảnh không khớp với thiết kế của website, sẽ làm cho ảnh thumnail chỉ hiển thị được 1 góc của ảnh thật. Chưa kể, nếu bạn xuất thumbnail trực tiếp bằng thẻ img, ảnh với các tỉ lệ khác nhau sẽ phá vỡ giao diện của bạn, trồi sụt một cách thảm hại.

Khi dùng kỹ thuật css cover art, ảnh dù ở tỉ lệ và kích thước nào cũng sẽ được fix vừa vào khung nhìn thiết kế trước, đảm bảo luôn hiển thị nội dung chính xác và không làm hỏng giao diện.

Kỹ thuật cover ảnh thumbnail này cần thực hiện trên cả HTML và CSS. Trong đó:

  • HTML cần dùng 1 thẻ div trống để làm khung hiển thị.  Lưu ý ta không dùng trực tiếp thẻ img, vì nếu dùng img, khi scale ảnh theo tỉ lệ khác với ảnh gốc, ảnh sẽ bị méo/lệch trông rất xấu!
  • CSS tự động resize ảnh, làm cho phần ảnh nền tự động fix vừa theo kích thước khung nhìn (thẻ div làm thumbnail) và căn vào chính giữa nội dung của ảnh. Việc căn giữa để thể hiện nội dung ảnh là mang tính dự đoán và gần như chính xác; do khi chụp ảnh, nội dung chính bức ảnh “thường” được căn vào giữa ảnh, ít thợ ảnh nào lại chụp chân dung với hình cô gái ở góc bức ảnh!

Thực hiện

Code HTML

Ở đây tôi tạo thẻ div .news  rộngđể chứa tin, mỗi tin tức .article  được format với thumb ở trên và tiêu đề bản tin ở dưới.

Code CSS

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.

Chú ý ở là trong đoạn css của .thumb , tôi đặt giá trị background-image  là none ? Do class .thumb  được dùng lại cho nhiều bản tin khác nhau, ta không thể set cứng cùng một hình ảnh được. Ta cần để lại phần set hình ảnh bằng cách nhúng trực tiếp trong code HTML. Sửa lại HTML như sau:

Hoàn thiện khi thao tác với PHP

Khi thao tác bằng PHP, ta có thể code như sau, giả sử đã có dữ liệu trong biến $article :

Chúc các bạn thành công!

Hoàng Tựa

Yêu thích lập trình web và tạo ra những thứ đẹp đẽ.

3 Comments

  1. Mình viết thế này nhưng sao hình ko hiển thị:

  2. Thường các lỗi không hiển thị ảnh là do sai link ảnh. Các bạn mở dev tools F12 check link nào bị 404 thì fix lại đường dẫn cho đúng nhé!

Leave a Reply

Your email address will not be published. Required fields are marked *