Tìm hiểu cách tự động thay đổi kích thước & điều chỉnh hình ảnh để phù hợp với bố cục trang bằng cách thay đổi các thông số URL. Không cần máy chủ xử lý hình ảnh.

Bạn đang xem : css tự động thay đổi kích thước hình ảnh

Cho dù đó là một trang web thương mại điện tử hay một blog đơn giản, bạn thường sẽ phải đối phó với việc thay đổi kích thước hình ảnh. Tùy thuộc vào số lượng hình ảnh, bạn có thể thực hiện theo cách thủ công hoặc dựa vào nền tảng cơ bản chạy trang web của bạn để tạo ra các biến thể kích thước khác nhau.

Hôm nay, chúng ta sẽ tìm hiểu một cách mới để xử lý hình ảnh chỉ bằng cách thay đổi hình ảnh Các URL. Không có máy chủ phụ trợ, không có chỉnh sửa hàng loạt thủ công và cắt xén!

Chúng tôi sẽ sử dụng ImageKit.io – một CDN hình ảnh miễn phí dành cho các nhà phát triển và nhà tiếp thị giúp thay đổi kích thước hình ảnh & amp; tối ưu hóa dễ dàng.

Đặc biệt, chúng tôi sẽ đề cập đến các chủ đề sau với các ví dụ. Bạn không cần phải tạo tài khoản để hiểu các ví dụ, nhưng nếu bạn muốn sử dụng ImageKit.io – hãy tạo tài khoản miễn phí ngay bây giờ.

  • Thay đổi kích thước hình ảnh – Chiều cao cơ bản & amp; thao tác chiều rộng
  • Cắt & amp; giữ nguyên tỷ lệ khung hình
  • Nhận diện khuôn mặt và vật thể
  • Thêm hình mờ
  • Thêm lớp phủ văn bản
  • Thích ứng với kết nối internet chậm
  • Đang tải trình giữ chỗ chất lượng thấp bị mờ

Đây là video trình diễn nhanh về việc thay đổi kích thước hình ảnh động trước khi chúng ta đi sâu vào chi tiết hơn.

Thay đổi kích thước hình ảnh – Chiều cao cơ bản & amp; thao tác chiều rộng

Giả sử chúng ta có một hình ảnh gốc là 1280x853px.

  https://ik.imagekit.io/ikmedia/woman .jpg  

Hình ảnh gốc 1280×853

Để có hình ảnh rộng 200px, chúng tôi sẽ thêm tham số truy vấn tr với giá trị w-200 là được hiển thị bên dưới:

  https://ik.imagekit.io/ikmedia/woman.jpg?tr=w-200  

200px hình ảnh rộng

Để thay đổi kích thước hình ảnh thành chiều rộng 400 và chiều cao 200, chúng ta có thể sử dụng tr = w-400, h-200

  https://ik.imagekit.io/ikmedia/woman.jpg?tr=w-400,h-200  

hình ảnh 400×200

ImageKit hiểu w và các tham số h . Bạn có thể chỉ định một giá trị tuyệt đối như chúng tôi đã làm ở trên, tức là 400px hoặc sử dụng số thực để cụ thể theo tỷ lệ phần trăm, ví dụ: 0,5 có nghĩa là 50% chiều rộng ban đầu. 0,1 nghĩa là 10% chiều rộng ban đầu, 0,4 ​​ nghĩa là 40% chiều rộng ban đầu, v.v.

Cắt & amp; giữ nguyên tỷ lệ khung hình

Nếu chỉ một trong các chiều cao (h) hoặc chiều rộng (w) được chỉ định, thì ImageKit.io sẽ điều chỉnh kích thước khác cho phù hợp để giữ nguyên tỷ lệ khung hình và không xảy ra hiện tượng cắt xén.

Nhưng khi bạn chỉ định cả chiều cao (h) và chiều rộng (w) và muốn giữ nguyên tỷ lệ khung hình – bạn có ba tùy chọn sau:

  • Cắt một số phần của hình ảnh. Bạn có thể chọn khu vực để cắt bằng cách kiểm soát điểm lấy nét.
  • Thêm phần đệm xung quanh hình ảnh. Bạn có thể kiểm soát màu nền của phần đệm để phù hợp với bố cục.
  • Cho phép ImageKit thay đổi chiều cao hoặc chiều rộng để toàn bộ hình ảnh hiển thị. Trong trường hợp này, chỉ một trong số các chiều cao hoặc chiều rộng phù hợp với thứ nguyên yêu cầu.

Hãy cùng tìm hiểu các tùy chọn cắt xén khác nhau bằng các ví dụ.

Không cắt xén – chỉnh chặt hình ảnh theo kích thước được yêu cầu

Nếu bạn cần một hình ảnh có kích thước chính xác như yêu cầu, ngay cả khi tỷ lệ co không được giữ nguyên , sử dụng tham số c-force .

  https://ik.imagekit.io/ikmedia/woman.jpg?tr=w -200, h-200, c-force  

Force fit

Lưu ý cách hình ảnh bị thu nhỏ vì tỷ lệ khung hình không còn khớp với tỷ lệ khung hình của hình ảnh gốc.

Xén tâm mặc định

Theo mặc định, ImageKit.io sẽ đảm bảo tỷ lệ khung hình giống nhau và cắt các cạnh trong khi thay đổi kích thước sao cho trung tâm của hình ảnh được giữ nguyên.

  https://ik.imagekit.io/ikmedia/woman.jpg?tr=w-200,h-200  

Trung tâm mặc định cro p

Vừa vặn bên trong vùng chứa (không cắt xén)

Nếu bạn muốn hình ảnh vừa với chiều cao được yêu cầu & amp; chiều rộng vùng chứa, sử dụng c-at_max . Trong trường hợp này, toàn bộ nội dung hình ảnh được giữ nguyên, tức là không xảy ra hiện tượng cắt xén, tỷ lệ khung hình được duy trì nhưng chiều cao thu được & amp; chiều rộng có thể khác với những gì được yêu cầu. Hãy xem làm thế nào.

Hình ảnh đầu ra nhỏ hơn hoặc bằng kích thước được chỉ định trong URL, tức là ít nhất một kích thước sẽ khớp chính xác với kích thước đầu ra được yêu cầu và kích thước còn lại sẽ bằng hoặc nhỏ hơn kích thước đầu ra tương ứng được yêu cầu. Điều này đảm bảo rằng hình ảnh đầu ra vừa vặn với chiều cao được yêu cầu & amp; width container.

Nó tương đương với object-fit: chứa hoặc background-size: chứa thuộc tính CSS.

 < code class = "language-html"> https://ik.imagekit.io/ikmedia/woman.jpg?tr=w-400,h-200,c-at_max  

Hình ảnh 300×200 vừa với bên trong Vùng chứa 400×200

Đổ đầy vùng chứa (không cắt xén)

Nếu bạn muốn hình ảnh bao phủ toàn bộ vùng chứa, hãy sử dụng c-at_least . Toàn bộ nội dung hình ảnh được giữ nguyên, tức là không cắt xén, tỷ lệ khung hình được giữ nguyên, nhưng chiều cao thu được & amp; chiều rộng có thể khác với những gì được yêu cầu.

Một trong các kích thước sẽ giống với những gì được yêu cầu, trong khi kích thước còn lại sẽ bằng hoặc lớn hơn những gì được yêu cầu.

< p> Nó gần tương đương với thuộc tính CSS object-fit: cover hoặc background-size: cover .

  https://ik.imagekit.io/ikmedia/woman.jpg?tr=w-400,h-200,c-at_least  

Hình ảnh 400×267 bao phủ vùng chứa 400×200

Không cắt xén – thêm phần đệm xung quanh hình ảnh

Nếu bạn không muốn hình ảnh bị cắt trong khi vẫn giữ nguyên tỷ lệ co, bạn có thể thêm phần đệm xung quanh các cạnh để có được kích thước mong muốn. Bạn cũng có thể kiểm soát màu nền của phần đệm này để phù hợp với bố cục và chủ đề trang web của mình.

  https://ik.imagekit.io/ikmedia/woman.jpg ? tr = w-200, h-100, cm-pad_resize, bg-DDDDDD  

Hình ảnh 200×100 với tham số padding

bg chấp nhận màu nền trong RGB Hex Code (ví dụ: FF0000) hoặc Mã RGBA (ví dụ: FFAABB50) phải được sử dụng cho hình ảnh. Nếu bạn chỉ định nền 8 ký tự, thì hai ký tự cuối cùng phải là một số từ 00 đến 99 , được sử dụng để biểu thị mức độ mờ của nền.

< h2 id = "face-and-object-Discovery"> Nhận diện khuôn mặt và vật thể

Trong khi tạo hình thu nhỏ từ hình ảnh lớn hơn, hình ảnh đầu ra thường trông không đẹp mắt. Hình ảnh có thể mất đi ý nghĩa và không thể truyền tải bất kỳ thông tin hữu ích nào.

Đây là nơi giúp phát hiện khuôn mặt và vật thể.

Ví dụ: hãy tạo 200x200 hình thu nhỏ và sử dụng cắt khuôn mặt ImageKit bằng tham số fo-face .

  https: // ik .imagekit.io / ikmedia / woman.jpg? tr = w-200, h-200, fo-face  

Face crop

Phát hiện đối tượng thông minh < /h3>

ImageKit.io có thể cắt hình ảnh một cách thông minh sao cho đối tượng quan tâm vẫn ở trung tâm bằng cách sử dụng cắt ảnh thông minh . Trong hình thu nhỏ được tạo bên dưới, người phụ nữ được giữ ở giữa.

  https://ik.imagekit.io/ikmedia/woman.jpg?tr=w -200, h-200, fo-auto  

Smart crop

Thêm hình mờ

Bạn có thể sử dụng hình mờ logo công ty để giúp bảo vệ tài sản kỹ thuật số của bạn và ngăn người khác sử dụng hình ảnh của bạn mà không được phép.

Với ImageKit, việc thêm hình mờ vào hình ảnh rất dễ dàng.

Giả sử chúng tôi muốn đặt ImageKit biểu trưng trên hình ảnh.

Có thể truy cập biểu trưng tại -

  https://ik.imagekit.io/ikmedia/logo/light -icon_GTyhLlWNX-.svg  

Hình ảnh chúng tôi muốn tạo hình mờ -

  https: / /ik.imagekit.io/ikmedia/woman.jpg?tr=w-600

Sử dụng hình ảnh lớp phủ (oi) chuyển đổi, chúng tôi có thể tạo hình ảnh watermarked.

  https://ik.imagekit.io/ikmedia/woman.jpg?tr=oi-logo@@light -icon_GTy hLlWNX-.svg  

Hình ảnh được tạo hình mờ

Bạn cũng có thể kiểm soát vị trí, kích thước và các tùy chọn thao tác khác của hình ảnh lớp phủ. Tìm hiểu thêm về lớp phủ hình ảnh từ tài liệu.

Thêm lớp phủ văn bản

Bạn có thể tự động thêm văn bản lớp phủ lên trên các hình ảnh để hiển thị giá bán, thông báo ra mắt sản phẩm mới hoặc tạo ảnh ghép .

Ví dụ: - Chúng tôi đã thêm ot-Sky là giới hạn trong URL để thêm chuỗi “Bầu trời là giới hạn” trên hình ảnh.

  https://ik.imagekit.io /ikmedia/backlit.jpg?tr=ot-Sky là giới hạn, otbg-FFFFFF90, otp-20, ots-70, otc-00000, ox-N0, oy-30  

Lớp phủ văn bản < h2 id = "adapt-for-slow-internet-connection"> Thích ứng với kết nối internet chậm

Là một nhà phát triển, chúng tôi thường phát triển và thử nghiệm trang web của mình trên kết nối internet nhanh hơn, có thể là tại văn phòng. Tuy nhiên, người dùng thực của chúng tôi không phải lúc nào cũng truy cập trang web của chúng tôi thông qua kết nối ổn định hoặc thiết bị nhanh hơn. Đặc biệt với việc ngày càng nhiều người dùng truy cập web bằng thiết bị di động, vấn đề kết nối Internet không ổn định càng quan trọng hơn.

Chúng tôi đã tiến hành một nghiên cứu để xác định tốc độ mạng được báo cáo bởi API thông tin mạng của trình duyệt Chrome cho người dùng của một trang web (với khách truy cập chủ yếu từ Ấn Độ). Không có gì đáng ngạc nhiên khi gần 40% khách truy cập được theo dõi đã báo cáo tốc độ thấp hơn 4G, tức là dưới 700 Kb / giây theo Thông số API thông tin mạng.

Ở các nước phát triển như Hoa Kỳ, tỷ lệ phần trăm số người dùng gặp sự cố này có thể thấp hơn. Tuy nhiên, có thể an toàn khi cho rằng một lượng lớn người dùng đang truy cập trang web của bạn trên kết nối chậm hơn vào một thời điểm nào đó.

Là nhà phát triển, chúng tôi có trách nhiệm điều chỉnh các ứng dụng web dựa trên kết nối của người dùng. Hình ảnh chất lượng thấp dẫn đến kích thước tệp nhỏ hơn và tải nhanh. Người dùng nên xem hình ảnh chất lượng thấp hơn là đợi lâu hơn trước màn hình trống.

Với ImageKit, bạn có thể dễ dàng thay đổi chất lượng hình ảnh bằng cách sử dụng tham số chất lượng tức là q . Nó chấp nhận giá trị từ 1 đến 100. 100 là giá trị cao nhất mà bạn không bao giờ nên sử dụng. 80 hoạt động trong hầu hết các trường hợp.

Ví dụ: để có được hình ảnh ở chất lượng 10, chúng tôi sẽ sử dụng q-10 như sau:

  https://ik.imagekit.io/ikmedia/woman.jpg?tr=q-10  

Hình ảnh ở chất lượng 10. Bạn có thể xem các thành phần nén.

Trong các trình duyệt web hiện đại , bạn có thể tận dụng API thông tin mạng . API này phân loại người dùng thành bốn nhóm - 4G, 3G, 2G và 2G chậm, trong đó 4G là nhanh nhất và 2G chậm là chậm nhất.

  // trả về '4g', '3g', '2g' hoặc 'chậm 2g'
var effectType = NetworkInformation.effectiveType;  

Bạn có thể triển khai một nhân viên dịch vụ để chặn các yêu cầu hình ảnh và thêm thông số chất lượng vào yêu cầu hình ảnh gửi đi dựa trên mạng hiệu quả loại.

Trên Android, bạn có thể sử dụng Network Connection Class - thư viện do Facebook phát triển cho phép bạn tìm hiểu chất lượng kết nối internet của người dùng hiện tại.

Đang tải trình giữ chỗ bị mờ chất lượng thấp

Hình ảnh bị mờ chất lượng thấp có kích thước tệp nhỏ hơn biến thể ban đầu của chúng, vì vậy chúng tải nhanh. Đó là lý do tại sao chúng thường được sử dụng làm trình giữ chỗ trong khi hình ảnh thực tế đang được tải ở chế độ nền. Ngay sau khi hình ảnh chất lượng cao được tải, trình giữ chỗ sẽ được thay thế bằng nó.

Nó mang lại trải nghiệm người dùng tiến bộ đẹp mắt. Bạn có thể nhận thấy điều này trên xuất bản Medium.

Bạn có thể tạo hình ảnh giữ chỗ chất lượng thấp bị mờ bằng cách sử dụng các thông số chất lượng và độ mờ được cung cấp trong ImageKit.

Để làm mờ, chúng tôi sẽ sử dụng bl . Giá trị của bl chỉ định bán kính của Gaussian Blur sẽ được áp dụng. Giá trị càng cao, bán kính của Gaussian Blur càng lớn. Các giá trị có thể bao gồm các số nguyên trong khoảng từ 1 đến 100 .

Bạn có thể sử dụng tính năng làm mờ với chất lượng để giảm kích thước tệp của hình ảnh trình giữ chỗ. Ví dụ - q-30, bl-10

  https://ik.imagekit.io/ikmedia/girl_in_white.jpg? tr = w-300, h-w-300, q-30, bl-10  

Ảnh gốc
Trình giữ chỗ chất lượng thấp


Summary

  • Trong ứng dụng web, bạn cần tải và hiển thị hình ảnh theo kích thước bắt buộc để phù hợp với bố cục.
  • Thay đổi kích thước hình ảnh theo cách thủ công không phải là một tùy chọn nếu bạn có hơn một trăm nội dung trên trang web của mình.
  • Bạn có thể dựa vào các tùy chọn chia tỷ lệ hình ảnh có sẵn của nền tảng. Tuy nhiên, chúng thường dẫn đến việc tạo hình thu nhỏ chất lượng kém và thiếu cấu hình cần thiết mà bạn cần để kiểm soát quá trình nén & amp; phẩm chất. Ví dụ: theo mặc định, Magento sử dụng tính năng nén mạnh các hình ảnh sản phẩm, dẫn đến trải nghiệm mua sắm kém cho người dùng. Tìm hiểu cách hiển thị hình ảnh sản phẩm thương mại điện tử chất lượng cao .
  • Tự động thay đổi kích thước hình ảnh thông qua các thông số URL là cách tiếp cận phù hợp. CDN hình ảnh như ImageKit.io, có hơn 50 tùy chọn chuyển đổi hình ảnh dựa trên URL. Bạn có thể tạo tài khoản miễn phí vĩnh viễn và bắt đầu sử dụng tài khoản đó trên trang web của mình.


Xem thêm những thông tin liên quan đến chủ đề css động thay đổi kích thước hình ảnh

How to use CSS object-fit to control your images

alt

  • Tác giả: Kevin Powell
  • Ngày đăng: 2018-10-12
  • Đánh giá: 4 ⭐ ( 7023 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Object-fit allows you to control your image in much of the same way you can do with background-image and background-size, but with even more properties at its disposal! It gives us 'cover' and 'contain' as well as 'fill', 'scale-down' and 'none', and 'none' works in a totally unexpected way (it's not the default!)

    And the intro thing... that's what happens when you're doing the final touches when you should have been in bed 3 hours earlier, lol.

    fiveminutefriday

    ---

    I have a newsletter! https://www.kevinpowell.co/newsletter

    New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass

    ---

    My Code Editor: VS Code - https://code.visualstudio.com/

    How my browser refreshes when I save: https://youtu.be/h24noHYsuGc

    ---

    Support me on Patreon: https://www.patreon.com/kevinpowell

    I'm on some other places on the internet too!

    If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

    Instagram: https://www.instagram.com/kevinpowell.co/
    Twitter: https://twitter.com/KevinJPowell
    Codepen: https://codepen.io/kevinpowell/
    Github: https://github.com/kevin-powell

Hướng dẫn tạo ảnh động CSS

  • Tác giả: tech-wiki.online
  • Đánh giá: 3 ⭐ ( 9717 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Kích cỡ trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 3212 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kích cỡ trong CSS - Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

CSS thay đổi kích thước hình ảnh và giữ tỷ lệ khung hình

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 1474 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] img { display: block; max-width:230px; max-height:95px; width: auto; height: auto; }

    This image is originally 400x400…

Các thuộc tính tùy chỉnh kích thước trong CSS

  • Tác giả: thachpham.com
  • Đánh giá: 3 ⭐ ( 4478 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu các thuộc tính tùy chỉnh kích thước các phần tử trong CSS như width, height, min-width, max-width, min-height, max-height

Chỉnh Kích Thước Ảnh Trong Css, Hướng Dẫn Resize Ảnh Không Bị Co Giãn Tỉ Lệ

  • Tác giả: vuihecungchocopie.vn
  • Đánh giá: 5 ⭐ ( 7449 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mình xin được giải đáp thắc mắc cho bạn có nick name Facbook là Nguyễn Duy Kiệt trên Group của diễn đàn WMP. Nguyên văn câu hỏi của bạn Kiệt như sau:

Chỉnh Kích Thước Ảnh Trong Css ? Các Thuộc Tính Tùy Chỉnh Kích Thước Trong Css

  • Tác giả: ruby-forum.org
  • Đánh giá: 5 ⭐ ( 6303 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1) Thuộc tính background-size trong CSS- Thuộc tính background-size dùng để thiết lập

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  Python: Đếm số lần xuất hiện trong danh sách (6 cách) • datagy - số lượng danh sách trong python

By ads_php