Thẻ HTML `img`

Khám phá những điều cơ bản về cách làm việc với hình ảnh và HTMLimgvà cách làm cho chúng phản hồi

Hình ảnh có thể được hiển thị bằng cách sử dụngimgnhãn.

Thẻ này chấp nhận mộtsrcmà chúng tôi sử dụng để đặt nguồn hình ảnh:

<img src="image.png" />

Chúng tôi có thể sử dụng một loạt các hình ảnh. Những cái phổ biến nhất là PNG, JPEG, GIF, SVG và gần đây là WebP.

Tiêu chuẩn HTML yêu cầu mộtaltthuộc tính hiện diện, để mô tả hình ảnh. Điều này được sử dụng bởi trình đọc màn hình và cũng được sử dụng bởi các bot của công cụ tìm kiếm:

<img src="dog.png" alt="A picture of a dog" />

Bạn có thể đặtwidthvàheightcác thuộc tính để thiết lập không gian mà phần tử sẽ sử dụng, để trình duyệt có thể tính đến phần tử đó và nó không thay đổi bố cục khi nó được tải đầy đủ. Nó nhận một giá trị số, được biểu thị bằng pixel.

<img src="dog.png" alt="A picture of a dog" width="300" height="200" />

Hình ảnh đáp ứng bằng cách sử dụngsrcset

Cácsrcsetthuộc tính cho phép bạn đặt hình ảnh đáp ứng mà trình duyệt có thể sử dụng tùy thuộc vào mật độ pixel hoặc chiều rộng cửa sổ, theo sở thích của bạn. Bằng cách này, nó chỉ có thể tải xuống các tài nguyên mà nó cần để hiển thị trang, mà không tải xuống hình ảnh lớn hơn nếu nó trên thiết bị di động, chẳng hạn.

Đây là một ví dụ, trong đó chúng tôi cung cấp 4 hình ảnh bổ sung cho 4 kích thước màn hình khác nhau:

<img src="dog.png"
	alt="A picture of a dog"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

bên trongsrcsetchúng tôi sử dụngwđo để chỉ ra chiều rộng cửa sổ.

Vì chúng tôi làm như vậy, chúng tôi cũng cần sử dụngsizesthuộc tính:

<img src="dog.png"
	alt="A picture of a dog"
	sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
	srcset="dog-500.png 500w,
	  		 dog-800.png 800w,
			 dog-1000.png 1000w,
			 dog-1400.png 1400w">

Trong ví dụ này,(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxchuỗi trongsizesthuộc tính mô tả kích thước của hình ảnh liên quan đến chế độ xem, với nhiều điều kiện được phân tách bằng dấu phẩy.

Điều kiện phương tiệnmax-width: 500pxđặt kích thước của hình ảnh tương quan với chiều rộng khung nhìn. Tóm lại, nếu kích thước cửa sổ là <500px, nó sẽ hiển thị hình ảnh ở 100% kích thước cửa sổ.

Nếu kích thước cửa sổ lớn hơn nhưng <900px, nó hiển thị hình ảnh ở 50% kích thước cửa sổ.

Và nếu lớn hơn nữa, nó sẽ hiển thị hình ảnh ở 800px.

Cácvw unit of measure can be new to you, and in short we can say that 1 vwlà 1% chiều rộng cửa sổ, vì vậy100vwlà 100% chiều rộng cửa sổ.

Một trang web hữu ích để tạosrcsetvà hình ảnh nhỏ dần làhttps://responsivebreakpoints.com/.

Tải xuống miễn phí của tôiSổ tay HTML


Các hướng dẫn html khác:


Công nghệ Wiki trực tuyến!