Responsive cho Ảnh chỉ bằng thẻ HTML5

0
39

Thiết kế Resposive cho ảnh có nhiều cách làm, nhưng có rất nhiều vấn đề cần được giải quyết khi làm thực tế.

Mặc dù thực tế responsive hình ảnh (tạo ảnh tự động thay đổi kích thước khi thay đổi màn hình hoặc thiết bị) là kỹ thuật đơn giản.

Chỉ có một vấn đề là thông thường hình ảnh khi tự động thay đổi kích thước thường resize toàn bộ. Dẫn tới hình ảnh sẽ tương đối khó nhìn khi thủ nhỏ.

Ý tưởng là tạo ảnh responsive mà khi thu nhỏ vẫn có thể thấy rõ.

Trình duyệt có thể tải hình ảnh nhỏ hơn hoặc lớn hơn theo kích thước khung nhìn. Bằng cách đó, chúng ta có thể định hướng và cung cấp tỷ lệ hình ảnh tốt nhất thay vì tự động resize toàn bộ ảnh.

Responsive cho ảnh bằng HTML5

Responsive cho ảnh bằng HTML5

HTML5 cung cấp cho chúng ta một thẻ picture để thiết kế responsive cho ảnh. Các hình ảnh cho phép chúng ta cung cấp nhiều nguồn hình ảnh và kiểm soát chúng thông qua Media Queries. Hãy xem cách nó được thực hiện.

Chuẩn bị hình ảnh responsive với các tỷ lệ phổ biến

Chuẩn bị các ảnh để Responsive cho ảnh với thẻ picture

Chuẩn bị các ảnh để Responsive cho ảnh với thẻ picture

Tôi đã chuẩn bị một hình ảnh với 3 kiểu khác nhau, như sau. Hình ảnh đã được cắt để tập trung vào người ở bên trong ảnh.

Kế hoạch ở đây là chúng ta sẽ hiển thị kích thước nhỏ nhất trong màn hình nhỏ và hình ảnh lớn hơn trong màn hình lớn.

Sử dụng thẻ Picture để responsive cho ảnh

Picturefill có thể hoạt động theo hai cách:

Chúng ta có thể nhúng srcset vào thẻ img hoặc sử dụng thẻ picture. Ở đây chúng ta sẽ lựa chọn phần tử img vì nó dễ quản lý hơn, dễ dàng hơn để hoàn tác và dễ đọc hơn.

Tương tự như các phần tử video và audio, picture bao bọc các phần tử suorce trỏ vào nguồn hình ảnh, như sau.

<picture>
  <source srcset="img/person-xsmall.jpg" media="(max-width: 480px)">
  <source srcset="img/person-small.jpg" media="(max-width: 640px)">
  <source srcset="img/person-med.jpg">
  <img srcset="img/person-med.jpg" alt="">
</picture>

 

Phần tử suorce, như bạn có thể thấy từ đoạn mã trên, được đặt với thuộc tính media. Trong thuộc tính này, chúng ta chỉ định điểm dừng để trong khoảng kích thước đó sẽ sử dụng hình ảnh đó. Bạn có thể thấy hiệu quả ngay lập tức.

Kết quả sau khi tạo Responsive ảnh bằng thẻ picture trong HTML5

Kết quả sau khi tạo Responsive ảnh bằng thẻ picture trong HTML5

Các trình duyệt hỗ trợ responsive cho ảnh với thẻ Picture

Hiện tại mọi trình duyệt đều hỗ trợ thẻ picture của HTML5 bao gồm cả Microsoft Edge cũng như các trình duyệt dành cho di động. Nhưng nếu bạn phải hỗ trợ các trình duyệt cũ như Internet Explorer, thì bạn có thể sử dụng một polyfill, Picturefill.

Picturefill là một thư viện JavaScript được phát triển bởi Filament Group. Nó cho phép chúng ta sử dụng các yếu tố picture ngay lập tức.

Để bắt đầu sử dụng Picturefill, hãy tải xuống từ Github và đặt picturefill.js hoặc picturefill.min.js trong thẻ head như sau:

<script src="js/picturefill.js"></script>

Lời kết

Thẻ Picture là thẻ bổ sung rất hay cho việc responsive cho ảnh trong phiên bản HTML5. Nó cung cấp nhiều quyền kiểm soát hơn đối với kích thước hình ảnh mà trình duyệt sẽ hiển thị trên các kích thước cụ thể.
Thẻ picture hoạt động trong tất cả các trình duyệt mới nhất. WordPress cũng đã cập nhật nó kể từ WordPress 4.4.
Nếu bạn cần hỗ trợ các trình duyệt cũ như Internet Explorer thì có thể sử dụng Picturefill.
Tác giả: Yaris

LEAVE A REPLY

Please enter your comment!
Please enter your name here