56. Style Image Trong CSS

Style Image trong CSS: bạn có thể tùy chỉnh kiểu hiển thị của hình ảnh bằng cách sử dụng các thuộc tính như width, height, object-fit, border, và nhiều thuộc tính khác. Dưới đây là một ví dụ về cách tạo kiểu cho hình ảnh bằng CSS:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .styled-image {
      width: 300px;
      height: 200px;
      border: 2px solid #333;
      border-radius: 10px;
      object-fit: cover;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }
  </style>
</head>
<body>
  <img class="styled-image" src="your-image.jpg" alt="Styled Image">
</body>
</html>

Trong ví dụ này:

Chúng ta có một hình ảnh với class .styled-image.
Sử dụng thuộc tính width và height để xác định kích thước của hình ảnh.
Sử dụng thuộc tính border để tạo viền xung quanh hình ảnh.
Sử dụng border-radius để làm cho các góc của hình ảnh trở nên tròn.
Sử dụng object-fit: cover; để điều chỉnh cách hình ảnh được hiển thị bên trong phần tử. Trong ví dụ này, hình ảnh sẽ được co dãn/kéo dài sao cho nó che phủ toàn bộ kích thước của phần tử mà không bị biến dạng.
Sử dụng box-shadow để thêm bóng đổ cho hình ảnh.

Lưu ý rằng các thuộc tính và giá trị có thể được điều chỉnh để phù hợp với nhu cầu thiết kế của bạn.

Leave a Comment Cancel Reply