Cắt image trong CSS với đối tượng phù hợp

Ta thường cần một hình ảnh phù hợp chính xác với một kích thước nhất định, nhưng vẫn giữ nguyên tỷ lệ khung hình và tránh để hình ảnh bị méo. Đây không phải là điều có thể dễ dàng thực hiện bằng CSS trong thời gian dài nhất. Một mẹo là sử dụng hình nền để giải quyết vấn đề. Vấn đề không còn là với thuộc tính object-fit !

Cùng với kế thừa, ban đầu và không được đặt , có 5 giá trị khác có thể có cho đối tượng phù hợp:

chứa : Hình ảnh giữ nguyên tỷ lệ co ban đầu nhưng được thay đổi kích thước để hình ảnh dài nhất có thể vừa với chiều cao hoặc chiều rộng theo các kích thước đã cho.
cover : Hình ảnh giữ nguyên tỷ lệ khung hình ban đầu và vùng hình ảnh được bao phủ hoàn toàn.
điền : Giá trị ban đầu. Hình ảnh sẽ lấp đầy khu vực nhất định của nó, ngay cả khi nó nghĩa là mất tỷ lệ khung hình.
none : Hình ảnh hoàn toàn không được thay đổi kích thước và kích thước hình ảnh root sẽ lấp đầy khu vực nhất định.
scale-down : Nhỏ hơn của một trong hai chứa hoặc không .

Thí dụ

Chiều rộng ban đầu của hình ảnh sau là 1200px và chiều cao là 674px. Ở đây, nó được hiển thị ở một nửa kích thước của nó, 600px x 337px:

Bây giờ ta có một vấn đề nếu ta cần hình ảnh có cùng chiều cao, nhưng vừa với một nửa chiều rộng. Tỷ lệ khung hình root bị mất và kết quả là hình ảnh bị méo:

giá trị phù hợp đối tượng

object-fit có thể khắc phục vấn đề đó cho ta . Hãy giới thiệu các giá trị khác nhau:

object-fit: chứa

.alligator-turtle {   object-fit: contain; }

object-fit: cover

.alligator-turtle {   object-fit: cover; }

object-fit: lấp đầy

.alligator-turtle {   object-fit: fill; }

object-fit: không có

.alligator-turtle {   object-fit: none; }

object-fit: scale-down

.alligator-turtle {   object-fit: scale-down; }

Trong ví dụ cụ thể này, object-fit: cover có lẽ là thứ sẽ hoạt động tốt nhất cho nhu cầu của ta .

đối tượng-vị trí

Bây giờ, giả sử hình ảnh của bạn đã được cắt bằng đối tượng vừa vặn , nhưng phần hình ảnh được hiển thị không được định vị như bạn muốn. Bạn có thể sử dụng thuộc tính object-position để kiểm soát chính xác điều đó.

Hãy bắt đầu với ví dụ cover: object-fit :

.alligator-turtle {   object-fit: cover;    width: 300px;   height: 337px; }

Bây giờ, hãy thay đổi vị trí của phần có thể nhìn thấy của hình ảnh trên trục X để ta nhìn thấy cạnh ngoài cùng bên phải của hình ảnh:

.alligator-turtle {   object-fit: cover;   object-position: 100% 0;    width: 300px;   height: 337px; }

Và cuối cùng, Đây là kết quả sẽ xảy ra nếu bạn cung cấp một vị trí nằm ngoài giới hạn:

.alligator-turtle {   object-fit: cover;   object-position: -20% 0;    width: 300px;   height: 337px; }

Tính tương thích của trình duyệt web:
Kể từ năm 2020, Tôi có thể sử dụng object-fit không? cho ta biết 97% trình duyệt global hỗ trợ nó. Internet Explorer 11 thì không.

Tags:

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03