Tìm hiểu object-fit trong CSS3 – Freetuts

Posted on by adminChuyên mục:Kiến thức Internet
Các bạn thân mến, ngày hôm nay tất cả chúng ta lại gặp nhau. Một website không hề thiếu hình ảnh minh họa, việc giải quyết và xử lý chúng tuân theo nhưng bố cục tổng quan chung cũng tạo nên yếu tố mà tất cả chúng ta cần phải xử lý. Freetuts xin gửi đến những bạn cách giải quyết và xử lý hình ảnh trong những trường hợp phải đổi khác lại kích cỡ ảnh gốc .

test php

banquyen png

Bài viết này được đăng tại

freetuts.net

, không được copy dưới mọi hình thức.

1. Object-fit trong CSS

Việc hiểu và sử dụng thuộc tính object-fit rất quan trọng, vì nó định dạng hình ảnh trên web. Một khi nói về hình ảnh thì chúng ta đang nói về giao diện chính của web. Bất cứ một trang web nào cũng cần có hình ảnh và hơn thế nữa độ chi tiết và hình ảnh đẹp được quan tâm hơn hết. Do đó bài học hôm nay khá quan trọng cho các bạn sử dụng nhiều hình ảnh đặc biệt là các web về ẩm thực, du lịch …

Đầu tiên, tại sao lại phải học thuộc tính này. Lý do rất đơn giản vì hình ảnh có vô vàng kích thước khác nhau và trên thẻ img trong đoạn mã HTML không thể nào xử lý được hết các tình huống đó. Chính vì vậy mà thuộc tính object-fit ra đời.

Để dễ hiểu hãy xem ví dụ sauBài viết này được đăng tại [ không lấy phí tuts. net ]
Xem demo
RUN






  
  
  Object Fit
  
  


  

    

      Origin image
      
    

    

      Object-fit use

Ta thấy ảnh bên trái là ảnh nguyên bản nhưng do khung ảnh khác với tỷ lệ của ảnh nên ảnh bị thu hẹp lại cho vừa với khung ảnh, việc này sẽ ảnh hưởng đến tính chất của hình ảnh bên trong làm xấu đi bức ảnh. Hãy xem tấm ảnh bên phải, hình đẹp hơn và rõ ràng hơn. Do ta dùng thêm thuộc tính object-fit với giá trị cover. Qua ví dụ này, ta đã hiểu được công dụng của thuộc tính object-fit. Nào cùng tìm hiểu từng giá trị của thuộc tính này ở phần kế tiếp bên dưới.

2. Các giá trị của object-fit

Thuộc tính object-fit có tất cả 5 giá trị. Trong phần này ta sẽ lần lượt tìm hiểu ý nghĩa từng giá trị một. Ta hãy bắt đầu

  • fill: đây là giá trị mặc định của thuộc tính object-fit, ảnh sẽ được thu nhỏ lại hoặc kéo dãn cho vừa với kích thước của khung bao bên ngoài những tỷ lệ của chiều cao và chiều rộng sẽ bị thay đổi nếu khác với tỷ lệ của khung.
  • contain: ảnh sẽ được thu gọn hoặc dãn ra để nằm trọn trong khung bao bên ngoài nhưng vẫn giữ được tỷ lệ chiều cao và chiều dài của ảnh.

  • cover: ảnh sẽ được thu gọn hoặc dãn ra để vừa với khung bao bên ngoài, vẫn giữ nguyên tỷ lệ chiều cao và chiều rộng nhưng khung bao sẽ được lấp đầy, lưu ý ảnh có thể bị cắt bớt một số phần.

  • none: ảnh giữ nguyên kích thước gốc, không thay đổi chiều cao và chiều rộng.

  • scale-down: giá trị này hơi phức tạp nếu kích thước gốc của ảnh nhỏ hơn chiều rộng và chiều dài của khung thì giá trị này tương đương với giá trị none, nếu ngược lại thì giá trị này tương đương giá trị contain.

Xem ví dụ bên dưới để hiểu rõ hơn :
Xem demo
RUN






  
  
  Object Fit
  
  


  

    

      Origin image
      
    

    

      Fill
      
    

    

      Cover
      
    

    

      Contain
      
    

    

      Scale-down

Trong ví dụ trên từng ảnh được thông số kỹ thuật mỗi giá trị khác nhau và so sánh với ảnh gốc. Ta thuận tiện nhận thấy sự độc lạ và so sánh với kim chỉ nan .

3. Lời kết

Qua bài học kinh nghiệm này, những bạn đã học được những giải quyết và xử lý ảnh để đổi khác kích cỡ theo một khuôn mẫu pháp luật sẵn. Điều này sẽ giúp ích cho những bạn trong qua trình tăng trưởng web, đặc biệt quan trọng là những thao tác với thư viện ảnh trong web bán hàng .
Cảm ơn những bạn, hẹn gặp lại trong những bài viết tiếp theo .

admin