Dưới đây là cách thêm hình ảnh thiết kế đáp ứng bằng cách sử dụng CSS
Nhìn vào các trang web phổ biến hiện nay và một trong những điều trị thiết kế mà bạn chắc chắn sẽ thấy là những hình ảnh nền màn hình rộng. Một trong những thách thức khi thêm những hình ảnh này là từ thực tiễn tốt nhất là các trang web phải đáp ứng với các kích thước và thiết bị màn hình khác nhau - một phương pháp được gọi là thiết kế web đáp ứng .
Vì bố cục của trang web của bạn thay đổi và tỷ lệ với kích thước màn hình khác nhau nên các hình nền này cũng có kích thước tương ứng với kích thước của chúng.
Trong thực tế, những "hình ảnh chất lỏng" là một trong những phần quan trọng của các trang web đáp ứng (cùng với một mạng lưới chất lỏng và các truy vấn phương tiện truyền thông). Ba phần này đã trở thành một yếu tố thiết kế web đáp ứng ngay từ đầu, nhưng trong khi vẫn dễ dàng thêm hình ảnh nội tuyến đáp ứng vào một trang web (hình ảnh nội tuyến là đồ họa được mã hóa như một phần của đánh dấu HTML), cùng với các hình nền (được tạo kiểu vào trang sử dụng các thuộc tính nền CSS) từ lâu đã cung cấp một thách thức đáng kể cho nhiều nhà thiết kế web và các nhà phát triển giao diện người dùng. Rất may, việc bổ sung thuộc tính "background-size" trong CSS đã làm điều này có thể.
Trong một bài viết riêng, tôi đã trình bày cách sử dụng kích thước nền thuộc tính CSS3 để kéo dài các hình ảnh để vừa với cửa sổ, nhưng có một cách tốt hơn, hữu ích hơn để triển khai cho thuộc tính này. Để thực hiện điều này, chúng tôi sẽ sử dụng kết hợp thuộc tính và giá trị sau:
background-size: bìa;
Thuộc tính từ khóa cover cho trình duyệt biết tỷ lệ hình ảnh để vừa với cửa sổ, bất kể cửa sổ lớn hay nhỏ đến mức nào. Hình ảnh được chia tỷ lệ để bao phủ toàn bộ màn hình, nhưng tỷ lệ và tỷ lệ khung hình ban đầu được giữ nguyên, ngăn hình ảnh bị bóp méo.
Hình ảnh được đặt trong cửa sổ lớn nhất có thể sao cho toàn bộ bề mặt cửa sổ được che phủ. Điều này có nghĩa là bạn sẽ không có bất kỳ điểm trống nào trên trang của mình hoặc bất kỳ sự biến dạng nào trên hình ảnh, nhưng điều này cũng có nghĩa là một số hình ảnh có thể bị cắt bớt tùy thuộc vào tỷ lệ màn hình và hình ảnh được đề cập. Ví dụ: các cạnh của hình ảnh (trên cùng, dưới cùng, bên trái hoặc bên phải) có thể bị cắt trên hình ảnh, tùy thuộc vào giá trị bạn sử dụng cho thuộc tính vị trí nền. Nếu bạn định hướng nền thành "trên cùng bên trái", bất kỳ dư thừa nào trên hình ảnh sẽ xuất hiện ở phía dưới và bên phải. Nếu bạn căn giữa hình nền, phần dư thừa sẽ tắt của tất cả các cạnh, nhưng vì sự dư thừa đó được trải ra, tác động trên bất kỳ một mặt nào sẽ ít được phục vụ hơn.
Cách sử dụng kích thước nền: bìa;
Khi tạo hình nền của bạn, bạn nên tạo một hình ảnh khá lớn. Mặc dù trình duyệt có thể làm cho hình ảnh nhỏ hơn mà không ảnh hưởng đáng kể đến chất lượng hình ảnh, khi trình duyệt tăng kích thước hình ảnh lên kích thước lớn hơn kích thước ban đầu, chất lượng hình ảnh sẽ bị suy giảm, bị mờ và bị pixel. Nhược điểm với điều này là trang của bạn có một hit hiệu suất khi bạn đang cung cấp hình ảnh khổng lồ cho tất cả các màn hình.
Khi bạn làm điều này, hãy đảm bảo chuẩn bị đúng những hình ảnh đó để tải xuống tốc độ và phân phối web . Cuối cùng, bạn cần phải tìm phương tiện hài lòng giữa kích thước và chất lượng hình ảnh đủ lớn và kích thước tệp hợp lý cho tốc độ tải xuống.
Một trong những cách phổ biến để sử dụng hình nền thu nhỏ là khi bạn muốn hình ảnh đó chiếm toàn bộ nền của trang, cho dù trang đó rộng và được xem trên máy tính để bàn hay nhỏ hơn nhiều và đang được gửi tới thiết bị cầm tay, di động thiết bị.
Tải hình ảnh của bạn lên máy chủ web của bạn và thêm hình ảnh đó vào CSS dưới dạng hình nền:
background-image: url (fireworks-over-wdw.jpg);
background-repeat: không lặp lại;
background-position: center center;
background-attachment: cố định;
Trước tiên hãy thêm CSS của trình duyệt đầu tiên:
-webkit-background-size: bìa;
-moz-background-size: bìa;
-o-background-size: bìa;
Sau đó, thêm thuộc tính CSS:
background-size: bìa;
Sử dụng hình ảnh khác nhau phù hợp với các thiết bị thay đổi
Mặc dù thiết kế đáp ứng cho máy tính để bàn hoặc trải nghiệm máy tính xách tay là quan trọng nhưng nhiều thiết bị có thể truy cập Web đã phát triển đáng kể và nhiều kích thước màn hình khác nhau đi kèm với điều đó.
Như đã đề cập trước đó, tải một hình nền đáp ứng rất lớn trên một điện thoại thông minh, ví dụ, không phải là một thiết kế hiệu quả hoặc băng thông có ý thức.
Tìm hiểu cách bạn có thể sử dụng truy vấn phương tiện để phân phát hình ảnh phù hợp với các thiết bị mà chúng sẽ được hiển thị và cải thiện hơn nữa tính tương thích của trang web của bạn với thiết bị di động.
Bài báo gốc của Jennfier Krynin. Biên tập bởi Jeremy Girard 9/12/17