Hướng dẫn dùng jsphoto JavaScript
Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Show Hình ảnh nổi tiếng là một trong những khía cạnh thách thức nhất của thiết kế web
đáp ứng (responsive). Hôm nay chúng ta sẽ xem xét cách làm thế nào phần tử Đầu tiên, vấn đềNhững ngày của những trang web có chiều rộng cố định, pexel perfect thật sự đã ở lại phía sau chúng ta. Trong thời đại của màn hình rộng, internet TV, máy tính bảng và điện thoại thông minh có kích thước khác nhau, giờ đây thiết kế của chúng ta có để phục vụ cho tất cả mọi thứ từ rộng 320px cho đến 7680px. Với nhiều độ phân giải khác nhau này dẫn đến một nhu cầu cho các hình ảnh để giãn ra hoặc thu nhỏ để phù hợp với những yêu cầu chiều rộng khác nhau. Điều này có thể chứng tỏ nó có vấn đề, ngoài hình ảnh véc tơ ra, đại đa số các hình ảnh có điểm ảnh cụ thể không thay đổi dựa trên chiều rộng. Vậy chúng ta làm gì? Hiện tại, giải pháp phổ biến nhấtThường thường, bạn sẽ thấy những điều sau đây ở trong CSS của các trang web có tính đáp ứng: img { max-width: 100%; height: auto; } Đoạn code này sử dụng thiết lập Nó giải quyết vấn đề đối với một khía cạnh, cho phép chúng ta hiển thị cùng một hình ảnh trong nhiều hoàn cảnh khác nhau. Nhưng nó không cho phép chúng ta xác định các hình ảnh khác nhau cho những hoàn cảnh khác nhau. Một giải pháp mới:
Nó sẽ mang lại cho quá trình đặt các hình ảnh có tính đáp ứng tương tự như các phần tử Nó sẽ cho phép bạn tải một hình ảnh hoàn toàn khác nhau tùy thuộc vào:
Điều này lần lượt có nghĩa là bạn có thể:
Phần tử |