CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Tìm hiểu object-fit trong CSS3

Các bạn thân mến, hôm nay chúng ta lại gặp nhau. Một trang web không thể thiếu hình ảnh minh họa, việc xử lý chúng tuân theo nhưng bố cục chung cũng tạo nên vấn đề mà chúng ta cần phải giải quyết. Freetuts xin gửi đến các bạn cách xử lý hình ảnh trong những tình huống phải thay đổi lại kích thước ảnh gốc.

1. Object-fit trong CSS

Việc hiểu và sử dụng thuộc tính object-fit rất quan trọng, vì nó định dạng hình ảnh trên web. Một khi nói về hình ảnh thì chúng ta đang nói về giao diện chính của web. Bất cứ một trang web nào cũng cần có hình ảnh và hơn thế nữa độ chi tiết và hình ảnh đẹp được quan tâm hơn hết. Do đó bài học hôm nay khá quan trọng cho các bạn sử dụng nhiều hình ảnh đặc biệt là các web về ẩm thực, du lịch ...

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Đầu tiên, tại sao lại phải học thuộc tính này. Lý do rất đơn giản vì hình ảnh có vô vàng kích thước khác nhau và trên thẻ img trong đoạn mã HTML không thể nào xử lý được hết các tình huống đó. Chính vì vậy mà thuộc tính object-fit ra đời.

Để dễ hiểu hãy xem ví dụ sau

Xem demo RUN
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Object Fit</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    div {
      margin: 30px;
      display: inline-block;
    }
    img {
      background-color: aqua;
    }
    .obf {
      object-fit: cover;
    }
    
  </style>
</head>
<body>
  <div>
    <div>
      <p>Origin image</p>
      <img width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh2.jpg">
    </div>
    <div>
      <p>Object-fit use</p>
      <img class="obf" width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh2.jpg">
    </div>
  </div>
</body>
</html>

Ta thấy ảnh bên trái là ảnh nguyên bản nhưng do khung ảnh khác với tỷ lệ của ảnh nên ảnh bị thu hẹp lại cho vừa với khung ảnh, việc này sẽ ảnh hưởng đến tính chất của hình ảnh bên trong làm xấu đi bức ảnh. Hãy xem tấm ảnh bên phải, hình đẹp hơn và rõ ràng hơn. Do ta dùng thêm thuộc tính object-fit với giá trị cover. Qua ví dụ này, ta đã hiểu được công dụng của thuộc tính object-fit. Nào cùng tìm hiểu từng giá trị của thuộc tính này ở phần kế tiếp bên dưới.

2. Các giá trị của object-fit

Thuộc tính object-fit có tất cả 5 giá trị. Trong phần này ta sẽ lần lượt tìm hiểu ý nghĩa từng giá trị một. Ta hãy bắt đầu

  • fill: đây là giá trị mặc định của thuộc tính object-fit, ảnh sẽ được thu nhỏ lại hoặc kéo dãn cho vừa với kích thước của khung bao bên ngoài những tỷ lệ của chiều cao và chiều rộng sẽ bị thay đổi nếu khác với tỷ lệ của khung.
  • contain: ảnh sẽ được thu gọn hoặc dãn ra để nằm trọn trong khung bao bên ngoài nhưng vẫn giữ được tỷ lệ chiều cao và chiều dài của ảnh.
  • cover: ảnh sẽ được thu gọn hoặc dãn ra để vừa với khung bao bên ngoài, vẫn giữ nguyên tỷ lệ chiều cao và chiều rộng nhưng khung bao sẽ được lấp đầy, lưu ý ảnh có thể bị cắt bớt một số phần.

  • none: ảnh giữ nguyên kích thước gốc, không thay đổi chiều cao và chiều rộng.

  • scale-down: giá trị này hơi phức tạp nếu kích thước gốc của ảnh nhỏ hơn chiều rộng và chiều dài của khung thì giá trị này tương đương với giá trị none, nếu ngược lại thì giá trị này tương đương giá trị contain.

Xem ví dụ bên dưới để hiểu rõ hơn:

Xem demo RUN
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Object Fit</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    div {
      margin: 30px;
      display: inline-block;
    }
    img {
      background-color: aqua;
    }
    .fill {
      object-fit: fill;
    }
    .cover {
      object-fit: cover;
    }
    .contain {
      object-fit: contain;
    }
    .scale-down {
      object-fit: scale-down;
    }
    .none {
      object-fit: none;
    }
  </style>
</head>
<body>
  <div>
    <div>
      <p>Origin image</p>
      <img width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg">
    </div>
    <div>
      <p>Fill</p>
      <img class="fill" width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg">
    </div>
    <div>
      <p>Cover</p>
      <img class="cover" width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg">
    </div>
    <div>
      <p>Contain</p>
      <img class="contain" width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg">
    </div>
    <div>
      <p>Scale-down</p>
      <img class="scale-down" width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg">
    </div>
    <div>
      <p>None</p>
      <img class="none" width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg">
    </div>
  </div>
</body>
</html>

Trong ví dụ trên từng ảnh được cấu hình mỗi giá trị khác nhau và so sánh với ảnh gốc. Ta dễ dàng nhận thấy sự khác biệt và so sánh với lý thuyết.

3. Lời kết

Qua bài học này, các bạn đã học được các xử lý ảnh để thay đổi kích thước theo một khuôn mẫu quy định sẵn. Điều này sẽ giúp ích cho các bạn trong qua trình phát triển web, đặc biệt là những thao tác với thư viện ảnh trong web bán hàng.

Cảm ơn các bạn, hẹn gặp lại trong các bài viết tiếp theo.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top