HTML Picture Element - Các thành phần hình ảnh trong HTML

by GokiSoft.Com - 22:35 22/05/2020 3,471 Lượt Xem

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> trong HTML

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.

ví dụ

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.

Khi nào được dùng thành phần Picture

Có hai mục đích chính cho thành phần <picture> :

1. Băng thông

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.

2. Hỗ trợ định dạng

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.

ví dụ

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