Hướng dẫn cắt ảnh css

Có lẽ trong hành trình code của các bạn thì không ít lần gặp vấn đề méo ảnh do fix cứng cả width, height của ảnh nhỉ? Hoặc kể cả khi bạn set value cho 1 thuộc tính weigth hoặc height còn thuộc tính còn lại để auto thì nhiều lúc ảnh cũng không được hiển thị toàn vẹn cho lắm. Từ đó sẽ dẫn tới việc không đúng ý của người upload image. Chính vì vậy, ở bài viết này mình xin giới thiệu tới các bạn tới 1 thuộc tính css có thể giải quyết vấn đề về căn chỉnh image giúp các bạn, đó là object-fit.

object-fit là thuộc tính hỗ trợ người dùng resize lại kích thước của hoặc

• fill: Đây là giá trị default. Lúc này image sẽ được thay đổi kích thước để có thể lấp kín element chứa nó nhiều nhất có thể. Nếu cần, hình ảnh sẽ được kéo căng hoặc thu nhỏ để vừa.
• contain: Hình ảnh vẫn giữ nguyên tỷ lệ co giãn nhưng được thay đổi kích thước để vừa với kích thước đã cho.
• cover: Hình ảnh giữ nguyên tỷ lệ co giãn và lấp đầy kích thước đã cho. Hình ảnh sẽ được cắt bớt sao cho vừa khớp với khung của element chứa nó.
• none: image không resize
• scale-down: Hình ảnh được thu nhỏ xuống phiên bản nhỏ nhất của none hoặc contain.

Ở trong bài này mình chú trọng tới 2 giá trị hay sử dụng nhất là cover và contain.

object-fit: cover

Như mình đã giải thích bên trên. Khi sử dụng object-fit: cover thì hình ảnh sẽ giữ nguyên tỷ lệ và sẽ được cắt bớt sao cho vừa khớp với khung của element chứa nó. Các bạn có thể xem ví dụ dưới đây:

  
No object-fit
  

  	

  



  
object-fit: cover
  

  	

  

Giải thích 1 chút với đoạn code trên: Mình có 1 ảnh. 1 bên chỉ set gái trị cho width còn height: auto, 1 bên fix cứng giá trị cho cả 2. Lúc này mình sẽ sử dụng css như sau:

.media {
	display: inline-block;
    margin: 30px;
}

.object {
	background: #E6E6FA;
    border: 4px double green;
    width: 350px;
    height: 350px;
}

img {display: block;}

.cover {object-fit: cover;}

Và kết quả hiển thị sẽ là như thế này:

Pham Thi Ngoc Mai @maiptn226

Theo dõi

3.9K 253 56

Đã đăng vào thg 3 8, 2021 8:08 SA 4 phút đọc

5.2K

4

4

Thủ thuật nhỏ để căn chỉnh image với object-fit

• Báo cáo
• Thêm vào series của tôi

Chào các bạn,

Có lẽ trong hành trình code của các bạn thì không ít lần gặp vấn đề méo ảnh do fix cứng cả width, height của ảnh nhỉ? Hoặc kể cả khi bạn set value cho 1 thuộc tính weigth hoặc height còn thuộc tính còn lại để auto thì nhiều lúc ảnh cũng không được hiển thị toàn vẹn cho lắm. Từ đó sẽ dẫn tới việc không đúng ý của người upload image. Chính vì vậy, ở bài viết này mình xin giới thiệu tới các bạn tới 1 thuộc tính css có thể giải quyết vấn đề về căn chỉnh image giúp các bạn, đó là object-fit.

object-fit là thuộc tính hỗ trợ người dùng resize lại kích thước của hoặc

• fill: Đây là giá trị default. Lúc này image sẽ được thay đổi kích thước để có thể lấp kín element chứa nó nhiều nhất có thể. Nếu cần, hình ảnh sẽ được kéo căng hoặc thu nhỏ để vừa.
• contain: Hình ảnh vẫn giữ nguyên tỷ lệ co giãn nhưng được thay đổi kích thước để vừa với kích thước đã cho.
• cover: Hình ảnh giữ nguyên tỷ lệ co giãn và lấp đầy kích thước đã cho. Hình ảnh sẽ được cắt bớt sao cho vừa khớp với khung của element chứa nó.
• none: image không resize
• scale-down: Hình ảnh được thu nhỏ xuống phiên bản nhỏ nhất của none hoặc contain.

Ở trong bài này mình chú trọng tới 2 giá trị hay sử dụng nhất là cover và contain.

object-fit: cover

Như mình đã giải thích bên trên. Khi sử dụng object-fit: cover thì hình ảnh sẽ giữ nguyên tỷ lệ và sẽ được cắt bớt sao cho vừa khớp với khung của element chứa nó. Các bạn có thể xem ví dụ dưới đây:

  
No object-fit
  

  	

  



  
object-fit: cover
  

  	

  

Giải thích 1 chút với đoạn code trên: Mình có 1 ảnh. 1 bên chỉ set gái trị cho width còn height: auto, 1 bên fix cứng giá trị cho cả 2. Lúc này mình sẽ sử dụng css như sau:

.media {
	display: inline-block;
    margin: 30px;
}

.object {
	background: #E6E6FA;
    border: 4px double green;
    width: 350px;
    height: 350px;
}

img {display: block;}

.cover {object-fit: cover;}

Và kết quả hiển thị sẽ là như thế này:

.media {
	background: #E6E6FA;
    border: 4px double green;
    margin: 30px;
    width: 350px;
    height: 350px;
    display: inline-block;
}

.media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.media {
	background: #E6E6FA;
    border: 4px double green;
    margin: 30px;
    width: 350px;
    height: 350px;
    display: inline-block;
}

.media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 5px 10%;
}