59. Object-position Trong CSS

object-position trong CSS: object-position là một thuộc tính cho phép bạn xác định vị trí hiển thị ban đầu của hình ảnh hoặc video bên trong một phần tử có kích thước cố định. Thuộc tính này sẽ xác định điểm chính (anchor point) của nội dung trong phần tử cha. Dưới đây là một ví dụ về cách sử dụng object-position:

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;
      object-position: center top;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img class="image" src="your-image.jpg" alt="Positioned Image">
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta sử dụng object-position: center top; để xác định điểm chính của hình ảnh ở trung tâm phía ngang và ở phía trên của phần tử cha.
Điều này sẽ làm cho hình ảnh được căn giữa ngang và dính sát phía trên của phần tử cha.

Các giá trị khác của object-position bao gồm các điểm chính như left, right, top, bottom, và cả các giá trị phần trăm để điều chỉnh vị trí hiển thị của hình ảnh trong phần tử cha.

Leave a Comment Cancel Reply