Thành phần <picture>
trong HTML cho phép chúng ta hiển thị các hình ảnh khác nhau cho các thiết bị hay kích cỡ màn hình khác nhau.
Thành phần <picture>
cho chúng ta thêm mềm dẻo khi xác định các tài nguyên hình ảnh.
Thành phần <picture>
chứa một số lượng của các thành phần <source>
, mỗi cái tham chiếu đến mỗi nguồn hình ảnh khác nhau. Với cách này trình duyệt có thể chọn hình ảnh có thể vừa vặn nhất cho cảnh quan hoặc/và thiết bị.
Mỗi thành phần <source>
có mô tả các thuộc khi hình ảnh của chúng là vừa vặn nhất.
Hiển thị các hình ảnh khác nhau trên các kích thước màn hình khác nhau:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>
<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
</p>
<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>
</body>
</html>
Ghi chú: Luôn xác định một thành phần <img>
như là thành phần con cuối cùng của thành phần <picture>
. Thành phần <img>
được sử dụng bởi các trình duyệt không hỗ trợ thành phần <picture>
, hoặc nếu không có thẻ<source>
nào phù hợp.
Có hai mục đích chính cho thành phần <picture>
:
Nếu bạn có một màn hình hoặc thiết bị nhỏ, không cần thiết phải tải một file hình ảnh lớn. Trình duyệt sẽ sử dụng thành phần <source>
đầu tiên với giá trị thuộc tính phù hợp, và bỏ quả bất kì thành phần tiếp theo nào.
Một vài trình duyệt hoặc thiết bị có thể không hỗ trợ toàn bộ các định dạng hình ảnh. Bằng cách sử dụng thành phần <picture>
, bạn có thể thêm cách hình ảnh của mọi loại định đạng, và trình duyệt sẽ sử dụng định dạng đầu tiên mà nó nhận ra và bỏ qua mọi định dạng tiếp theo.
Trình duyệt sẽ sử dụng định dạng hình ảnh đầu tiên mà nó nhận ra:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
<p>The picture element can be used when the image format is not supported by all devices.</p>
<p>The device will use the first image format it supports, and ignore the rest of the images.</p>
</body>
</html>
Ghi chú: Trình duyệt sẽ sử dụng thành phần <source>
đầu tiên với các giá trị thuộc tính phù hợp, và bỏ qua tất cả các thành phần <source>
tiếp theo.
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website