Cách cắt hình ảnh trong CSS – css hình ảnh cắt tròn

Bài viết mô tả tất cả các khả năng cắt hình ảnh mà CSS cung cấp vào năm 2021. Bạn không cần hack nữa!

Bạn đang xem : xén hình ảnh css

Cắt xén hình ảnh bằng CSS là một chủ đề được đề cập kỹ lưỡng và có rất nhiều bài báo về nó trên internet, vì vậy tại sao phải có một cái khác? Đây là một câu hỏi hay, và tôi có câu trả lời. Nhiều bài đăng đề cập đến 1000 và 1 cách cắt xén hình ảnh của bạn một cách gian xảo, điều này có thể gây hiểu lầm cho người mới. Chúng tôi sẽ bỏ các kỹ thuật giải quyết khác và tập trung vào những kỹ thuật có mục đích ban đầu là cắt hình ảnh. Rất may, giờ đây chúng tôi có một loạt các kỹ thuật này và thậm chí còn nhiều hơn thế nữa.

“Tại sao bạn muốn cắt hình ảnh trong trình duyệt?” Tôi có hỏi không?

“Tại sao chúng ta không thể ngừng hỏi tại sao và chuyển sang chủ đề, tiếng Đức?” Bạn có thể hỏi tôi một cách hợp lý để trả lời.

Chúng ta cần tiếp tục hỏi “lý do” vì chúng ta muốn đưa ra quyết định cân bằng. Chúng tôi muốn hiểu nó có thể áp dụng ở đâu và chi phí cho chúng tôi. Đôi khi chúng tôi muốn cắt một hình ảnh bằng CSS đơn giản vì chúng tôi là nhà phát triển front-end và không thể thực hiện việc này trên máy chủ. Điều này có thể là do thiếu kiến ​​thức hoặc truy cập vào máy chủ. Tin tốt là API CDN phong phú dành cho dịch vụ của bạn ở đây.

Hãy xem bức tranh tuyệt đẹp về than đang cháy này:

Hình ảnh đốt than đá
Hình ảnh về than đang cháy

https://ucarecdn.com/5766e35a-14fd-4ede-ae35-1e7823bf7e64/-/preview / 1600×900 /

Với một số điều chỉnh URL, chúng tôi có thể cắt hình ảnh và tập trung vào than đang cháy phía sau tâm ở bên phải.

Ảnh cắt về than đốt
Ảnh cắt về than đang cháy

https://ucarecdn.com/5766e35a-14fd-4ede-ae35-1e7823bf7e64/-/preview / 1600×900 / – / crop / 500×500 / 680,180 /

Hạn chế của phương pháp này là chúng tôi cần sử dụng CDN để giữ hình ảnh của mình.

Có bất kỳ các trường hợp còn lại mà chúng ta cần cắt ảnh dựa trên CSS? Chắc chắn, tôi có thể nghĩ đến việc triển khai hiệu ứng thị sai hoặc có một băng chuyền có kích thước cố định để hiển thị các hình ảnh khác nhau. Ngoài ra, ống kính trên các trang web thương mại điện tử sử dụng tính năng cắt rất nhiều.

Trong bài viết này, chúng ta sẽ xem xét các cách hiện có để cắt hình ảnh bằng CSS từ đơn giản nhất đến phức tạp nhất:

  • & lt; img & gt; thẻ với object-fit object-position
  • background-image thuộc tính với background-size background-position
  • Hình ảnh hoặc hình nền có tỷ lệ ổn định
  • Cắt hình tròn bằng cách sử dụng border-radius
  • Đường cắt phức tạp với clip-path

Phương pháp đầu tiên và cơ bản. Sử dụng phần tử & lt; img & gt; chung và hai thuộc tính: object-fit object-position . Hãy cùng điều tra object-fit đầu tiên. Tôi sẽ không thực hiện công việc xây dựng công thức và sẽ sử dụng định nghĩa từ tiêu chuẩn CSS .

object-fit thuộc tính chỉ định cách nội dung của phần tử được thay thế sẽ được lắp vào hộp được thiết lập theo chiều cao và chiều rộng đã sử dụng của nó.

Vui lòng sử dụng liên kết được cung cấp tới một tiêu chuẩn để khám phá các biến thể khác nhau của giá trị . Tôi sẽ cung cấp một số ví dụ trực tiếp để minh họa chúng.

Ý tưởng về object-fit là chúng ta có & lt; img & gt; và nó có kích thước được chỉ định:

  

& lt;

img

class

=

"

fit-image

"

src

=

"

https://ucarecdn.com/dbffe489-e4c9-449f-a013-2f2381eb778c/-/preview/400x300/

"

alt

=

"

Hình ảnh gốc

"

& gt;

  

. Fit-image

{

width

:

150px

;

height

:

150px

;

object-fit

:

& lt; một số giá trị & gt;

;

}

Trong trường hợp này, kích thước của & lt; img & gt; là 150 px x 150 px. Kích thước của hình ảnh mà chúng tôi muốn minh họa là 201 px x 300 px. Chúng ta cần phải dung hòa sự khác biệt này bằng cách nào đó. Thuộc tính object-fit cho phép chúng tôi thiết lập chiến lược điều chỉnh. Tôi phải thừa nhận rằng không phải lúc nào nó cũng dẫn đến việc cắt xén. Đôi khi bạn bị kéo giãn hoặc thu nhỏ. Tuy nhiên, sẽ rất hữu ích nếu cung cấp hình ảnh đầy đủ về object-fit , không để đánh lừa bạn.

Giá trị scale-down có vẻ không rõ ràng. Hãy quan sát ví dụ sau để hiểu rõ hơn về cách hoạt động của nó.

Tại thời điểm này, cuối cùng chúng ta đã đến thuộc tính CSS object-position . Thuộc tính này tồn tại để giúp chúng tôi chuyển đổi đối tượng được hiển thị. Hãy xem các ví dụ sau đây. Đọc chú thích bên dưới để hiểu các biến thể của thuộc tính object-position .

Bây giờ bạn đã hiểu cách điều chỉnh vị trí của hình ảnh đã cắt.

Phù, phần cuối cùng khá lớn. Cái này sẽ giống nhau chứ? Chà, tôi hy vọng nó sẽ giống một cái gì đó để chúng ta có thể rút ngắn lại một chút. Tôi nghĩ rằng chúng ta sẽ thấy một chút khác biệt về ngữ nghĩa, mà tôi sẽ dành một đoạn văn nhỏ và một vài ví dụ. Hình nền hóa ra có đáy giả và một hình nền khác sau đó.

Trước tiên, hãy để tôi chỉ ra các tiêu chuẩn: background-image , background-size và < span class = "PrimaryLink__StyledPrimaryLink-sc-1mpllwq-0 MgXev" rel = "noopener noreferrer" target = "_ blank"> background-position. Đừng dành quá nhiều thời gian ở đó nếu bạn muốn có một số câu trả lời thiết thực. Tốt hơn hãy sử dụng các ví dụ dưới đây và điều tra CSS của chúng. Sử dụng các liên kết này nếu bạn cần hiểu biết sâu sắc hoặc một số cảm hứng để thử nghiệm.

Bạn muốn sử dụng hình nền thay vì ngôn ngữ & lt; img & gt; ? Chà, việc sử dụng hình nền không cung cấp cho bạn tính năng kéo và thả. Nếu chúng ta đang nói về nhận thức trong bối cảnh này, tôi khuyên bạn nên sử dụng hình ảnh nền để tạo tâm trạng. Hình ảnh đơn giản sẽ tốt nếu chúng là tác nhân tích cực của câu chuyện.

Tuy nhiên, hãy bỏ qua suy luận cảm tính và quay lại các ví dụ cơ bản:

Bạn có thể thấy rằng trạng thái ban đầu của hình nền thà có tên phiến hơn là cắt xén. Các ví dụ khác hiển thị hành vi mà chúng tôi mong đợi từ việc cắt xén. Sử dụng thuộc tính background-size giúp bạn linh hoạt hơn về kích thước mà bạn có thể đặt để kéo dài ảnh của mình.

  

. lạ-kích thước-nền-hình ảnh

{

background-image

:

1234px 5678px

;

}

Đoạn mã trên hoàn toàn hợp lệ.

Phần tiếp theo cung cấp cho bạn khả năng cắt xén linh hoạt hơn. Bạn có thể nhớ thuộc tính box-sizing cho trình duyệt biết những gì cần bao gồm trong chiều rộng. Có hai thuộc tính cho nền sử dụng cùng một ý tưởng: background-origin background-clip .

Tôi đã tạo một ví dụ minh họa chín cách kết hợp có thể có:

Cả background-origin background-clip có ba giá trị có thể có: border-box , padding-box content-box . Trong trường hợp đầu tiên, bạn xác định vị trí để giải quyết ảnh nền. Đối với border-box , góc trên bên trái của nền sẽ nằm ở điểm trên bên trái của đường viền. Logic là giống nhau đối với padding-box content-box . Sự khác biệt duy nhất là nơi bạn áp dụng nền.

Thuộc tính background-clip cho biết nơi xảy ra "vụ mùa". Hãy xem CSS sau:

  

. Origin-border-clip-content

{

background-origin

:

border

;

background-clip

:

content

;

}

Nó làm cho hình nền của bạn bắt đầu ở góc trên cùng bên trái của đường viền và tiếp tục đến dưới cùng bên phải. Nhưng bạn sẽ thấy phần duy nhất bên dưới nội dung vì đã áp dụng cắt bớt.

Hai thuộc tính được mô tả là phần dưới giả đầu tiên mà tôi đã đề cập. Tại sao tôi lại gọi chúng như vậy? Vì họ là khách mời hiếm hoi trong các bài viết khác về chủ đề và tôi chỉ phát hiện ra họ trong thông số kỹ thuật . Và đáy giả thứ hai là gì? Nó được cắt thành văn bản. Phần thú vị về giá trị text của giá trị background-clip thuộc tính là nó đến từ một cái gọi là Mức sống HTML . Câu chuyện đằng sau đó là xung đột của ngày xưa và tiền tố - webkit- là ngày xưa cách tiếp cận để xác minh các tính năng mới trong trình duyệt. Hai yếu tố này chỉ có thể giới thiệu cốt truyện và khúc quanh cho bài viết này, nhưng chúng ta đừng đi quá xa. Hãy xem lớp CSS quyến rũ này:

  

. Background-clipped-to-text

{

color

:

transparent

;

background-clip

:

text

;

- webkit-background-clip

:

text

;

}

Nó cho phép chúng tôi triển khai hiệu ứng tuyệt đẹp khi có một bức tranh tô màu văn bản của chúng tôi.

Trước khi viết bài này, tôi biết rằng hiệu ứng này có sẵn trong SVG và sẽ mô tả nó cho bạn. Giờ đây, chúng tôi không còn cần đến điều này nữa vì chúng tôi có một giải pháp CSS đơn giản hơn nhiều.

Thứ đã sử dụng nhiều cách hack nhất trong những lần trước là giữ nguyên tỷ lệ nội dung của một hình ảnh được cắt. Khi bạn sử dụng hình ảnh có 100% chiều rộng của vùng chứa, bạn không thể đặt chiều cao một cách rõ ràng để giữ tỷ lệ. Thuộc tính CSS co-ratio sẽ giúp bạn ở đây. Nó có sự hỗ trợ tốt của các trình duyệt hiện đại nhưng không tốt khi bất cẩn. Vui lòng kiểm tra caniuse.com để xác minh.

Bán kính đường viền được đặt chính xác và phần tràn ẩn là hai công cụ của các bậc thầy CSS vẽ hình ảnh của họ. Chúng tôi sẽ sử dụng các kỹ thuật của họ để thực hiện một số thao tác cắt tròn. Chúng tôi sẽ không ở đây quá lâu vì phương pháp này hoạt động với cả hình ảnh thông thường và hình nền và chúng tôi đã đề cập đến chúng.

Hình ảnh đẹp về con chó ở trên có đường viền không phải là hình chữ nhật. Bạn có thể thử di chuột qua và thấy rằng trình duyệt không giả định là đường viền hình chữ nhật vô hình mà là đường viền thực tế.

Thuộc tính CSS này là phần bổ sung duy nhất cần thiết để áp dụng cách cắt phù hợp:

  

. một số -class

{

border-radius

:

& lt; giá trị bắt buộc & gt;

;

}

Cú pháp của mục tiêu border-radius rất phức tạp và tôi khuyên bạn nên sử dụng tài liệu tham khảo tốt để hiểu rõ hơn.

Kỹ thuật này là phức tạp nhất trong số các thuộc tính được nêu tên và mạnh mẽ nhất. Nó có thể yêu cầu một bài báo riêng để bao gồm tất cả các khả năng của nó. Hoặc một cuốn sách chuyên dụng nếu bạn quan tâm đến chủ đề SVG. Chúng tôi sẽ trình bày về cú pháp, cách sử dụng cơ bản và xem một số ví dụ.

Nếu bạn nghĩ về công cụ CSS này một thời gian, bạn có thể nhận ra rằng theo một nghĩa nào đó, đó là công cụ duy nhất có tên trong bài viết này là chuyên dụng để cắt ảnh. Các thuộc tính CSS khác có tính năng cắt xén như một tác dụng phụ - chúng tôi thậm chí có bận tâm đến chúng không? Bởi vì các thuộc tính này dễ tiếp cận hơn khi sử dụng. Ngoài ra, đôi khi bạn cần cắt xén như một tác dụng phụ chứ không phải tác dụng chính.

Hãy xem cú pháp của thuộc tính clip-path đầu tiên:

  

. clipped-image

{

clip-path

:

& lt; clip-source & gt; | [& lt; basic-shape & gt; || & lt; hộp hình học & gt; ] | không ai

}

Chúng tôi sẽ điều tra từng thứ từ nguyên thủy nhất đến phức tạp nhất.

Không có đường dẫn cắt nào được được tạo.

Phần cú pháp này cho phép chúng tôi hoạt động bằng cách sử dụng tập hợp các hình dạng được xác định trước. Bất chấp những hạn chế của nó, nó khá mạnh mẽ. Vì basic-shape , bạn có thể sử dụng ngôn ngữ inset () , circle () , ellipse () , polygon () hoặc path () . Cái cuối cùng cung cấp khả năng sử dụng cú pháp SVG để cắt.

Chúng tôi có thể bỏ qua giá trị hộp hình học . Chà, chúng ta có thể sử dụng nó và bỏ qua basic-shape . Khi bạn sử dụng hộp hình học , bạn hạn chế việc cắt xén với một khu vực cụ thể, ví dụ: padding-box hoặc SVG-Inspi hộp nét . Tôi sẽ không cung cấp ví dụ về hộp hình học được áp dụng. Nếu tôi cố gắng hiển thị mọi mẫu, tôi sẽ cần ít nhất 42 mẫu trong số đó.

Tuy nhiên, bạn có thể hiểu bằng cách xem các ví dụ về ngôn ngữ background-clip được trình bày ở trên.

clip-source ở đây có nghĩa là CSS url (& lt; Một liên kết đến hàm phần tử clipPath & gt;) . Phần lớn các trình duyệt tại thời điểm viết bài này không hỗ trợ SVG bên ngoài. Điều này có ý nghĩa gì đối với chúng tôi với tư cách là nhà phát triển? Cú pháp ngụ ý rằng ở đâu đó trong phần đánh dấu của trang, bạn có phần tử & lt; svg & gt; chứa & lt; clipPath & gt; với id . SVG bên ngoài hầu như không được hỗ trợ là một tệp riêng biệt. Ngoài ra, chúng tôi sẽ đặt & lt; clipPath & gt; bên trong & lt; defs & gt; , một vị trí đặc biệt bên trong SVG dành riêng cho việc xác định nhưng không vẽ. Xem ví dụ sau:

Bạn có thể tìm thấy SVG mà tôi đã sử dụng trong phần HTML của ví dụ này. Nó chứa phần tử & lt; path & gt; với mô tả về một ngoằn ngoèo bắt buộc trong d thuộc tính. Tôi rất hài lòng vào lúc này, nhưng CSS đã vượt quá mong đợi của tôi. Nó chỉ ra rằng tôi có thể cắt một hình ảnh một cách trực quan và làm cho văn bản xung quanh nó phản ánh hình dạng của nó. Xin lưu ý rằng cách tiếp cận này chỉ hoạt động với các phần tử nổi. Hãy xem ví dụ sau:

Bạn có thể nghĩ rằng shape-ngoài là một tính năng ít người biết đến từ một trong những bản dựng hàng đêm hàng đầu. Tôi rất vui khi làm bạn thất vọng khi chúng tôi làm việc với thuộc tính CSS trưởng thành được hỗ trợ bởi 94,61% trình duyệt có sẵn . Phần xấu của thuộc tính là bạn không thể sử dụng SVG của mình để cắt từ bước trước. Tôi nghĩ rằng CSSWG MDN gây hiểu lầm về tính khả dụng của đường dẫn < / code> cú pháp - cú pháp này không tồn tại trên trang web W3C và tôi không thể tìm nó trong số mã trên GitHub hoặc làm cho nó chạy trong Firefox hoặc Chrome. Mời bạn theo dõi vấn đề của tôi được tạo trong kho MDN GitHub để cập nhật về cuộc điều tra.

Tôi đã chuyển đổi thủ công thuộc tính SVG path có tên ở trên và sử dụng thuộc tính polygon giá trị của shape-external . Tôi cũng đã sử dụng shape-margin: 1em để đặt một số không gian trống xung quanh hình ảnh của tôi để có hình ảnh tốt hơn hiệu ứng. Vui lòng điều tra phần CSS của ví dụ CodePen.

Việc cắt hình ảnh bằng CSS hóa ra là một chủ đề rộng hơn nhiều so với những gì tôi có thể tưởng tượng. Nếu bạn cần một hình ảnh đã cắt không có động, tôi khuyên bạn nên sử dụng các API CDN của mình cho việc đó. Bạn cũng có thể giải quyết một máy chủ, nhưng nó sẽ yêu cầu bảo trì bổ sung, vì vậy hãy cân nhắc ưu và nhược điểm. Nếu bạn cần ứng dụng của mình đáp ứng hoặc có nhiều giao diện người dùng, hãy xem xét các tùy chọn được mô tả và chọn tùy chọn phù hợp nhất cho nhu cầu của bạn. Giờ đây, bạn có thể làm những gì mình cần mà không cần đến các vụ hack.


Xem thêm những thông tin liên quan đến chủ đề css hình ảnh cắt tròn

Hướng dẫn sử dụng Photoshop để cắt ảnh theo hình tròn

alt

  • Tác giả: YooTV
  • Ngày đăng: 2017-06-16
  • Đánh giá: 4 ⭐ ( 6766 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bình thường mọi người hay sử dụng công cụ Crop để cắt ảnh, nhưng Crop chỉ có thể cắt ảnh theo hình Vuông, vậy muốn cắt theo hình tròn thì làm sao. quá đơn giản chúng ta dùng công cụ Elliptical Marquee Tool nhé các bạn

Crop hình ảnh bằng CSS đơn giản và cần thiết

  • Tác giả: caodem.com
  • Đánh giá: 3 ⭐ ( 3040 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách Căn Ảnh Ra Giữa Trong Css Để Căn Giữa Một Hình Ảnh Theo Chiều Ngang

  • Tác giả: worldlinks.edu.vn
  • Đánh giá: 5 ⭐ ( 3923 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang cố gắng tập trung vào một hình ảnh theo chiều ngang bằng cách sử dụng css, Tôi đang hiển thị hình ảnh của mình trên màn hình với mã HTML sau: Tôi đang xén hình ảnh của mình vì tôi chỉ muốn hiển thị một số hình ảnh và tôi đang sử dụng css sau:img

Cách bo tròn hình ảnh với CSS3

  • Tác giả: codewebdao.cf
  • Đánh giá: 3 ⭐ ( 1798 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong thiết kế web sử dụng hình ảnh bo tròn là điều thường thấy đối với trước đây bạn muốn tạo một hình bo tròn phải dùng đến photoshop hoặc công cụ chỉnh sửa hình ảnh nào đó, tuy nhiên hiện nay thì mọi thứ đã quá dễ dàng cho ác bạn khi đã có CSS3. Để CSS3 hoạt động được thì trình duyệt phải hỗ trợ sử dụng cụ thể các là: Google Chrome, Opera hay các phiên bản IE9+, Firefox 4+, Safari 5+ đều sử dụng được chức năng này.

Border Image - Tạo đường viền bằng hình trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 6090 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Border Image trong CSS là việc thêm hình ảnh xuất hiện trên đường viền cho các phần tử.

✓ Hướng dẫn 4 cách cắt ảnh thành hình tròn miễn phí

  • Tác giả: thuthuat.tip.edu.vn
  • Đánh giá: 5 ⭐ ( 7692 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn tạo hình tròn trong CSS

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 4234 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu Gần đây, chúng tôi đã làm việc trong một dự án liên quan đến hình tròn, hình thu nhỏ tròn, nút tròn, container tròn,... Trong bài viết hôm nay mình sẽ chia sẻ cho các bạn các cách tạo hình...

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tạo số ngẫu nhiên duy nhất trong SQL Server - tạo máy chủ sql số ngẫu nhiên