Trở về

CSS Tips: Chia tỷ lệ và cắt ảnh bằng CSS

bởi Vi Nè

Bạn có thể sẽ gặp phải trường hợp mà bạn muốn giữ nguyên tỷ lệ khung hình ban đầu và nếu giữ nguyên tỷ lệ khung hình thì hình ảnh bị méo do bị kéo giãn theo khung. Một giải pháp phổ biến cho vấn đề này là sử dụng thuộc tính CSS background-image.

Trong bài viết này, chúng ta sẽ tìm hiểu các thuộc tính của object-fit như fill, cover, contain, nonescale-down. Ngoài ra chúng ta sẽ lượn 1 vòng thằng object-position trong image.

1. Ví dụ 1 ảnh đơn giản

<img
  src="https://s3.cloudfly.vn/cunghocwebhome/wp-content/uploads/2021/08/example-object-fit-min.jpg"
  width="600"
  height="337"
  style="width: 600px; height: 337px;"
  alt="Chia tỷ lệ và cắt ảnh bằng CSS"
/>

Với đoạn html trên, chúng ta đã thu nó lại với tỷ lệ ngang 600px và dọc 337px như kết quả sau:

Chia tỷ lệ và cắt ảnh bằng CSS

<img
  src="https://s3.cloudfly.vn/cunghocwebhome/wp-content/uploads/2021/08/example-object-fit-min.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px;"
  alt="Chia tỷ lệ và cắt ảnh bằng CSS"
/>

Còn ta cho nó tỷ lệ ngang 300px mà dọc vẫn giữ nguyên thì ta có kết quả sau:

Chia tỷ lệ và cắt ảnh bằng CSS

Đấy, nhìn rất méo mó và không đẹp, chính vì thế mà bạn nên tìm hiểu tiếp tục khi bạn đọc đến đây.

2. Sử dụng object-fit

2.1. Thuộc tính object-fit: cover

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover;"
  ...
/>

Chia tỷ lệ và cắt ảnh bằng CSS

Kết quả là ảnh sẽ lấp đầy theo chiều dọc, 2 bên trái phải sẽ được ẩn đi.

2.2. Thuộc tính object-fit: contain

<img
  ...
  style="width: 300px; height: 337px; object-fit: contain;"
  ...
/>

Chia tỷ lệ và cắt ảnh bằng CSS

Kết quả là ảnh sẽ được lấp đầy theo chiều ngang, ảnh sẽ bị hụt 2 phía trên và dưới.

2.3. Thuộc tính object-fit: none

<img
  ...
  style="width: 300px; height: 337px; object-fit: none;"
  ...
/>

Chia tỷ lệ và cắt ảnh bằng CSS

Kết quả là ảnh sẽ giữ nguyên size của nó, khung ảnh chỉ như là 1 cái cửa sổ để hiển thị nó.

3. Sử dụng object-fitobject-position

Chúng ta thường sẽ kết hợp 2 em nó lại:

  • object-fit được hiểu như là cách để ảnh hiển thị mà vẫn giữ được kích thước ảnh bên trong khung.
  • object-position được hiểu là vị trí của ảnh được hiển thị.

Ví dụ

Ta có:

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
  ...
/>

Giải thích:

  • object-fit: cover làm cho ảnh trong khung vừa phía trên và dưới và nếu chỉ dùng thuộc tính này thì mặc định nó sẽ hiển thị vị trí là center.
  • object-position: left top vị trí ảnh hiển thị được chỉ định như đoạn html ví dụ là left = 100% và top = 0, nghĩa là nó sẽ hiển thị toàn bộ qua phải và nằm phía trên.

Kết quả:

Chia tỷ lệ và cắt ảnh bằng CSS

4. Chốt

Trong bài viết này, bạn đã khám phá các giá trị cho các thuộc tính CSS object-fitobject-position.

Trước khi sử dụng object-fit trong dự án của bạn, hãy chắc chắn rằng nó được hỗ trợ trong các trình duyệt của bạn, nhưng hiện tại trình duyệt nào cũng hổ trợ cả, vì vậy cứ chơi đi…

Bài viết cùng từ khóa
Chúng tôi tạm dừng chức năng bình luận, mọi thắc mắc vui lòng gửi thông qua mục liên hệ. Xin cám ơn!

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon