IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ Học HTML5 - CSS3 HTML Picture Element - Các thành phần hình ảnh trong HTML

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

by GokiSoft.Com - 22:35 22/05/2020 2,277 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.


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!