img显示

假设图片高度70px，被包在一个div内，div高度只有50px。

默认图片是会溢出div的，怎么让图片自适应，即高度变为50px呢？

给图片设置高度100%

CSS响应式图片

image-set() 语法

background-image: image-set(
  "image-1x.jpg" 1x,
  "image-2x.jpg" 2x,
  "image-3x.jpg" 3x
)

1x、2x、3x 代表 设备像素比（DPR），浏览器会根据屏幕分辨率选择最合适的图片。

picture标签和img标签

1. <img> 标签

• 用途：用于插入单一图像，是最基本的图像展示标签。
• 特性：
  • 使用 src 属性指定图像的 URL。
  • 使用 alt 属性提供图像的替代文本。
  • 可以使用 srcset 和 sizes 属性来提供不同分辨率的图片，以适应不同的设备（如视网膜显示屏）。

<img src="image.jpg" alt="A description of the image">

2. <picture> 标签

• 用途：提供一种更灵活的方式，根据不同的条件（如屏幕大小、分辨率、浏览器特性）选择显示不同的图像。

• 特性：

  • 包含一个或多个 <source> 标签，用于指定不同的图像资源及其使用条件（通过媒体查询、格式等）。
  • <img> 标签作为 <picture> 的后备，提供默认的图像显示。
  • 支持响应式图片、格式选择（如 WebP、JPEG）、按条件加载不同图片等高级功能。

  示例：

  <picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="default.jpg" alt="A description of the image">
  </picture>
  

  在这个例子中，如果浏览器支持 WebP 格式，则加载 image.webp；否则，如果支持 JPEG 则加载 image.jpg；如果都不支持，才会加载 default.jpg。