58. Object-fit Trong CSS

object-fit trong CSS: object-fit là một thuộc tính dùng để kiểm soát cách hình ảnh hoặc video sẽ được hiển thị bên trong một phần tử có kích thước xác định. Thuộc tính này cho phép bạn điều chỉnh việc co giãn, thu nhỏ, kéo dãn hình ảnh để nó phù hợp với kích thước của phần tử mà không làm biến dạng nội dung. Dưới đây là một ví dụ về cách sử dụng object-fit:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      width: 300px;
      height: 200px;
      border: 2px solid #333;
      overflow: hidden;
    }

    .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img class="image" src="your-image.jpg" alt="Fitted Image">
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo một phần tử cha có class .image-container để giới hạn kích thước của hình ảnh.
Sử dụng CSS width, height, và border để tạo một vùng giới hạn cho hình ảnh.
Sử dụng overflow: hidden; để đảm bảo rằng bất kỳ nội dung nào vượt ra ngoài kích thước phần tử cha sẽ bị ẩn đi.
Sử dụng object-fit: cover; để co giãn hoặc kéo dãn hình ảnh để nó che phủ toàn bộ vùng của phần tử cha mà không bị biến dạng.

Các giá trị khác của object-fit bao gồm fill, contain, none, scale-down, và mỗi giá trị sẽ tạo hiệu ứng khác nhau khi điều chỉnh kích thước và vị trí hiển thị của hình ảnh.

Leave a Comment Cancel Reply