Tìm hiểu object-fit trong CSS3 – Freetuts

Posted on by mtoplistChuyên mục:Top List

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.

test php

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.

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 …

Đầ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

Bài viết này được đăng tại [free tuts .net]

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.

mtoplist