Hình ảnh đáp ứng được thực hiện dễ dàng với ResponsifyJS
Web hiện đại phải đáp ứng 100% và các thư viện mới hơn đang làm cho điều này ngày càng khả thi.
Với các plugin miễn phí, chẳng hạn như ResponsifyJS, thậm chí còn dễ dàng hơn để trang web của bạn hoạt động trên tất cả các thiết bị. Điều này plugin jQuery miễn phí lấy một thùng chứa hình ảnh và tự động sắp xếp lại chúng dựa trên kích thước màn hình khác nhau.
Vì các container khác nhau giữ hình ảnh khác nhau, họ có thể thay đổi kích thước theo những cách rất lạ. Đôi khi, bạn sẽ có ảnh của mọi người và khuôn mặt của họ có thể bị cắt khi thay đổi kích thước trên thiết bị di động.
Plugin Responsify được tạo ra để giải quyết vấn đề chính xác này. Nó có thể hoạt động tự động nhưng ma thuật thực sự nằm ở xác định vùng tập trung của riêng bạn trên bức tranh.
Nó sử dụng một hệ thống nội bộ của mô tả thập phân để tìm nơi tập trung của hình ảnh. Ví dụ, bạn có thể xác định vị trí nhu la tập trung dữ liệu mà “khối trong” một đoạn nhất định của hình ảnh.
Dữ liệu này cần phải được thông qua dưới dạng số thập phân, ví dụ: 0,5 mục tiêu thập phân 50% của hình ảnh (trái / phải hoặc trên / dưới). Đương nhiên, điều này khá khó hiểu để làm một mình. Nhưng, có một ứng dụng miễn phí cho phép bạn tính toán các vị trí một cách linh hoạt trong trình duyệt của bạn.
Chỉ cần tải lên một hình ảnh, xác định vùng lấy nét, sau đó sao chép / dán mã hình ảnh vào trang web của bạn. Plugin Responsify sẽ có tất cả dữ liệu cần thiết để thay đổi kích thước hình ảnh đúng cách trên màn hình nhỏ hơn.
Bạn có thể tìm thấy một vài liên kết demo trực tiếp trong repo GitHub, bao gồm các đoạn mã để sao chép / dán vào trang web của bạn.
Plugin này không phải là giải pháp hoàn hảo cho mọi dự án. Đôi khi, bạn sẽ muốn hình ảnh để thay đổi kích thước mà không có khu vực tập trung cố định. Nhưng, nếu bạn đang sử dụng lưới nề với jQuery Sẽ không hại khi thêm ResponsifyJS vào ngăn xếp của bạn.
Để tìm hiểu thêm, hãy truy cập trang chủ plugin để xem bản demo trực tiếp, liên kết tải xuống và hướng dẫn thiết lập đầy đủ.
