0
0
Posts
NH
Nguyễn Hải 91nguyenhai181911

Tìm hiểu những thuộc tính CSS của images

Đăng vào 8 tháng trước

• 3 phút đọc

Chủ đề:

CSS

CSS (Cascading Style Sheets) là ngôn ngữ thiết kế web cho phép các nhà phát triển và thiết kế kiểm soát cách trình bày các trang web. Trong số các yếu tố có thể được kiểm soát bằng CSS, hình ảnh là một trong những thành phần quan trọng nhất, giúp tăng cường trải nghiệm người dùng và thu hút sự chú ý của họ. Dưới đây là một số thuộc tính CSS chính dùng để điều chỉnh hình ảnh, cùng với các ví dụ minh họa.

Thuộc tính widthheight

Thuộc tính widthheight trong CSS được sử dụng để thiết lập chiều rộng và chiều cao của hình ảnh. Bạn có thể đặt giá trị này bằng pixel hoặc phần trăm, tùy thuộc vào nhu cầu của bạn.

css Copy
img {
  width: 300px;
  height: 200px;
}

Trong ví dụ trên, hình ảnh sẽ có chiều rộng 300 pixel và chiều cao 200 pixel. Nếu bạn muốn hình ảnh phản hồi (responsive), bạn có thể sử dụng phần trăm hoặc max-width với height: auto; để bảo toàn tỷ lệ khung hình:

css Copy
img {
  max-width: 100%;
  height: auto;
}

Thuộc tính object-fit

Thuộc tính object-fit cho phép bạn kiểm soát cách một hình ảnh được hiển thị trong khuôn khổ của nó, giống như cách bạn điều chỉnh hình ảnh trên một khung ảnh thực tế. Các giá trị của object-fit bao gồm: fill, contain, cover, none, và scale-down.

css Copy
img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

Trong ví dụ này, hình ảnh sẽ phủ kín toàn bộ không gian được chỉ định mà không làm méo hình ảnh, có thể cắt bớt các phần không vừa khít.

Thuộc tính border, border-radius

Bạn có thể thêm viền cho hình ảnh và làm tròn các góc của nó sử dụng borderborder-radius.

css Copy
img {
  border: 5px solid black;
  border-radius: 10px;
}

Hình ảnh sẽ có một viền đen dày 5px và các góc được làm tròn với bán kính 10px.

Thuộc tính filter

CSS cung cấp thuộc tính filter cho phép bạn áp dụng các hiệu ứng như làm mờ, độ bão hòa và nhiều hiệu ứng khác lên hình ảnh.

css Copy
img {
  filter: grayscale(100%);
}

Hình ảnh sẽ chuyển thành màu xám. Bạn cũng có thể kết hợp nhiều hiệu ứng:

css Copy
img {
  filter: blur(5px) brightness(0.8);
}

Hình ảnh sẽ bị làm mờ và độ sáng được giảm xuống 80%.

Thuộc tính background-image

Thuộc tính background-image cho phép bạn đặt một hình ảnh làm nền cho một phần tử. Điều này rất hữu ích cho các phần tử như div, header, footer, và nhiều hơn nữa.

css Copy
div {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

Trong ví dụ này, background-size: cover; đảm bảo rằng hình ảnh nền phủ kín toàn bộ div và background-position: center; đảm bảo rằng hình ảnh được căn giữa.

Kết luận

Thuộc tính CSS cho hình ảnh cung cấp một loạt các công cụ mạnh mẽ để cải thiện giao diện và trải nghiệm người dùng trên trang web của bạn. Bằng cách sử dụng các thuộc tính như width, height, object-fit, filter, và background-image, bạn có thể tạo ra các hiệu ứng hình ảnh đẹp mắt và phản hồi mà không cần sử dụng phần mềm chỉnh sửa hình ảnh bên ngoài. Điều này không chỉ giúp cải thiện tốc độ tải trang mà còn giúp tạo ra một trang web thân thiện với người dùng và thẩm mỹ cao.

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào