Thay đổi size ảnh với thuộc tính object-fit css3

219 Views 5 Likes Comment

Hôm nay mình xin giới thiệu một thuộc tính trong CSS3 giúp các bạn có thể thay đổi kích cỡ size ảnh mà không lo bị méo object-fit

Object-fit trong CSS3

object-fitThuộc tính CSS được sử dụng để chỉ định cách thay đổi kích thước <img> hoặc <video> để phù hợp với vùng chứa của nó.

Thuộc tính này cho biết nội dung để điền vào container theo nhiều cách khác nhau; chẳng hạn như “giữ tỷ lệ khung hình đó” hoặc “kéo dài và chiếm càng nhiều không gian càng tốt”.

Ví dụ:

Tất cả các giá trị của thuộc tính phù hợp với đối tượng CSS

Ngoài ra object-fit có thể có các giá trị sau:

  • fill– Đây là mặc định. Nội dung thay thế có kích thước để điền vào hộp nội dung của phần tử. Nếu cần thiết, đối tượng sẽ được kéo dài hoặc cắt cho phù hợp
  • contain – Nội dung được thay thế được thu nhỏ để duy trì tỷ lệ khung hình của nó trong khi vừa với hộp nội dung của phần tử
  • cover– Nội dung được thay thế có kích thước để duy trì tỷ lệ khung hình của nó trong khi điền vào toàn bộ hộp nội dung của phần tử. Đối tượng sẽ được cắt bớt để phù hợp
  • none – Nội dung thay thế không được thay đổi kích thước
  • scale-down – Nội dung có kích thước như thể không có hoặc chứa được chỉ định (sẽ dẫn đến kích thước đối tượng cụ thể nhỏ hơn)
No votes yet.
Please wait...

Bạn có thể thích

Hãy bình luận chém gió đi nào. HAHA Thank!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *