Cập nhật · 2025-10-13

Hình ảnh trong CSS

Sử dụng hình ảnh trong CSS - từ đặt kích thước, căn giữa, lazy load, đến cách chọn giữa background-image và thẻ img.

Minh Lâm

@minhlam1996vn

Hình ảnh đóng vai trò quan trọng trong thiết kế web. Không chỉ giúp nội dung sinh động hơn, hình ảnh còn góp phần truyền tải thông điệp và tạo ấn tượng trực quan với người dùng.

Trong CSS, bạn có thể kiểm soát cách hiển thị, bố cục, kích thước và hành vi của hình ảnh bằng nhiều kỹ thuật khác nhau.

Đặt kích thước tối đa cho hình ảnh

Việc đặt kích thước tối đa giúp hình ảnh tự động co giãn phù hợp với màn hình, tránh tình trạng vỡ bố cục trên thiết bị nhỏ.

Dùng thuộc tính: max-width: 100%.

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .content {
    max-width: 700px;
    margin: 0 auto;
    padding: 24px;
    font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }
</style>

<div class="content">
  <h1>Đặt kích thước tối đa cho hình ảnh</h1>
  <img
    src="https://images.unsplash.com/photo-1759800805660-8bc4595568ec"
    alt="Ảnh minh họa co giãn trong CSS"
  />
  <p>
    Với <code>max-width: 100%</code>, hình ảnh sẽ tự động thu nhỏ theo chiều
    rộng phần tử chứa mà không bị vỡ bố cục.
  </p>
</div>

Căn giữa hình ảnh

Căn giữa hình ảnh giúp bố cục gọn gàng và dễ nhìn hơn, đặc biệt khi hình nằm trong các khối nội dung.

Dùng thuộc tính: margin: 0 auto.

<style>
  .content img {
    max-width: 80%;
    display: block;
    margin: 16px auto;
  }
</style>

<div class="content">
  <h1>Căn giữa hình ảnh</h1>
  <img
    src="https://images.unsplash.com/photo-1760336472685-4c3f0dd8d204"
    alt="Hình ảnh căn giữa"
  />
</div>

Lazy load cho hình ảnh

Lazy loading là kỹ thuật trì hoãn việc tải hình ảnh cho đến khi chúng gần xuất hiện trong vùng nhìn thấy của người dùng.

Cách sử dụng cực kỳ đơn giản - chỉ cần thêm thuộc tính: loading="lazy".

<p>
  <img loading="lazy" src="..." alt="" />
</p>

Sử dụng kỹ thuật lazy load giúp tiết kiệm băng thông, tăng tốc độ truy cập trang và nâng cao trải nghiệm người dùng.

Giữ đúng tỉ lệ hình ảnh với `object-fit`

Để hình ảnh phủ kín khung chứa nhưng vẫn giữ đúng tỉ lệ, dùng object-fit.

<style>
  .cover-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
  }
</style>

<figure>
  <img
    class="cover-img"
    src="https://images.unsplash.com/photo-1678401717781-a60845579e69?auto=format&fit=crop&w=1170&q=80"
    alt="Ảnh cover"
  />
</figure>

object-fit: cover giúp hình ảnh không bị méo khi co giãn.

Bọc văn bản xung quanh hình ảnh

Kỹ thuật này giúp hình ảnh và văn bản hiển thị hài hòa - thường dùng trong các bài viết hoặc tin tức.

Cách làm: float: left; margin: 10px 20px 10px 0;

<style>
  .post img {
    float: left;
    width: 200px;
    border-radius: 6px;
  }

  .post p {
    line-height: 1.6;
  }
</style>

<div class="post">
  <img
    src="https://images.unsplash.com/photo-1521575107034-e0fa0b594529?auto=format&fit=crop&w=300&q=80"
    alt="Ảnh minh họa"
  />
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, ea. Văn
    bản sẽ tự động bao quanh hình ảnh, giúp bố cục tự nhiên và dễ đọc hơn.
  </p>
</div>

Dùng `background` hay `img`?

Dùng <img> khi hình ảnh có ý nghĩa nội dung (ảnh sản phẩm, bài viết, avatar...).
Dùng background-image khi hình ảnh chỉ mang tính trang trí (ảnh nền, hoa văn, texture...).

Ảnh nền từ background-image sẽ không được Google index, vì vậy không nên dùng cho ảnh mang nội dung.

Hỗ trợ in `backgrounds`

Khi in trang web, trình duyệt mặc định không in ảnh nền hoặc màu nền.

Để bật tính năng này, thêm thuộc tính:

@media print {
  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

Sử dụng @media print để chỉ áp dụng đoạn code khi ở chế độ in, giúp tinh chỉnh bản in mà không ảnh hưởng đến hiển thị web thông thường:

@media print {
  body {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
}

<style>
  .bg-example {
    background-image: url('https://images.unsplash.com/photo-1497005367839-6e852de72767?auto=format&fit=crop&w=1200&q=80');
    height: 300px;
  }

  @media print {
    body {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
  }
</style>

<div class="bg-example"></div>

Kết luận

Qua bài viết này, bạn đã nắm được các kỹ thuật quan trọng khi làm việc với hình ảnh trong CSS:

Dùng max-width để hình ảnh co giãn linh hoạt
Căn giữa với margin: auto
Tối ưu hiệu suất bằng loading="lazy"
Duy trì tỉ lệ hiển thị với object-fit
Bọc văn bản bằng float
Phân biệt rõ giữa <img> và background-image
Và đảm bảo ảnh nền được in ra nếu cần với print-color-adjust

Việc hiểu và áp dụng đúng các kỹ thuật này sẽ giúp giao diện web chuyên nghiệp, nhẹ và thân thiện hơn với người dùng.

Bài trước

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Bài tiếp theo

Lorem ipsum dolor sit, amet consectetur adipisicing elit.