Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Sử dụng thẻ HTML5 Picture trong thiết kế web
Sử dụng thẻ HTML5 Picture trong thiết kế web
Nguyễn Trung Hiếu
Share Code Web Company 2014

Sử dụng thẻ HTML5 Picture trong thiết kế web

Chào các bạn, lâu rồi mới lại quay lại viết blog xíu, (thực ra là toàn đi dịch lại cho anh chị em dễ vọc). Nay Hiếu tôi xin đăng một bài viết về cách sử dụng thẻ picture trong HTML5 để giúp tối ưu hóa phần hiển thị hình ảnh được tốt hơn trong các chế độ của Responsive Website.

Thực trạng cần giải quyết

Bình thường chúng ta khi thiết kế website có liên quan tới hình ảnh, thường fix độ rộng chuẩn từng centimet một. Tuy nhiên, một ngày nào đó, người dùng của chúng ta truy cập vào website bằng một màn hình cỡ lớn, chẳng hạn như internet tivi hoặc màn hình cỡ nhỏ như tablet hoặc smartphone.
Với các kích thước khác nhau đó, làm thế nào để ảnh của chúng ta không bị vỡ?

Giải pháp thường thấy

Giải pháp thường thấy nhất là chúng ta thiết kế theo hướng responsive bằng css như sau

html5 picture
Với việc set max-widthheight:auto, về cơ bản chúng ta đã giải quyết được vấn đề trên.

Giải pháp mới

Tuy nhiên, bài viết này chưa dừng lại ở đó. Chúng ta sẽ cùng đi nghiên cứu thẻ picture của HTML5 xem nó thực sự mạnh tới cỡ nào.
Với thẻ picture nó cũng giống như thẻ audiovideo đều cho phép chúng ta chèn nhiều ảnh với kích thước khác nhau vào trong thẻ, và tùy từng kích thước màn hình mà nó sẽ chọn ảnh nào để hiển thị ra. Các bạn xem thêm hình bên dưới
html5 picture

Vậy, sử dụng thẻ picture như thế nào?

Cú pháp cơ bản của thẻ picture như sau:

Chú ý rằng, giá trị trong thuộc tính media giống với css, điều đó có nghĩa là bạn có thể sử dụng một số giá trị như max-height, max-width, min-height, min-width, orientation

Đoạn mã trên sẽ load một bức ảnh thu nhỏ dành cho các thiết bị có màn hình hiển thị nhỏ, và load ảnh default cho những màn hình khổ rộng
Hiện tại thì thẻ chỉ hỗ trợ một số trình duyệt nhất định, nếu bạn muốn sử dụng thẻ này cho tất cả các trình duyệt, thì chúng ta sử dụng thêm một script hỗ trợ là Picturefill 2.0. Và chúng ta thêm đoạn mã sau để fix cho IE 9

Chúc bạn có website đẹp!

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}