HTML5和CSS经常被用来构建现代化的网页。在一个网站中，图片是非常重要的内容之一，而怎样使图片自适应成为一个非常受欢迎的功能。本文将介绍如何使用HTML5和CSS实现图片的自适应。

为什么需要图片自适应

在传统的网页设计中，图片通常是以固定的宽度和高度展示的，这会导致在不同屏幕尺寸的设备上显示不一致，或者图片被拉伸变形。为了提供更好的用户体验，图片自适应功能变得越来越重要。

使用HTML5实现图片自适应

HTML5引入了一个非常有用的元素<picture>，它可以根据设备的屏幕分辨率和特性选择最佳的图片进行展示。下面是一个使用HTML5实现图片自适应的示例代码：

<picture>
  <source srcset="image-small.jpg" media="(max-width: 600px)">
  <source srcset="image-medium.jpg" media="(max-width: 900px)">
  <source srcset="image-large.jpg">
  <img src="image-default.jpg" alt="自适应图片">
</picture>

在上面的代码中，<picture>元素包含了多个<source>元素和一个<img>元素。每个<source>元素定义了一张图片和一个媒体查询，用于根据设备的屏幕尺寸选择对应的图片。如果没有匹配的媒体查询，将会使用<img>元素的src属性中指定的默认图片。

使用CSS实现图片自适应

除了使用HTML5的<picture>元素，CSS也提供了多种方式来实现图片的自适应。下面是使用CSS实现图片自适应的示例代码：

.img-container {
  max-width: 100%;
  height: auto;
}
.img-container img {
  width: 100%;
  height: auto;
}

在上面的代码中，.img-container类定义了包含图片的容器元素的最大宽度为100%，高度自动调整以保持图片比例不变。.img-container img选择器将图片的宽度设置为100%，高度也自动调整以保持图片比例不变。

总结

通过HTML5和CSS的强大功能，实现图片的自适应变得非常简单。无论是使用HTML5的<picture>元素，还是使用CSS的样式调整，都可以根据设备的屏幕尺寸和特性选择合适的图片并保持其比例不变。希望这篇博客能够帮助你实现图片的自适应功能。

本文来自极简博客，作者：蔷薇花开，转载请注明原文链接：HTML5 CSS 实现图片自适应