css3html5自动切换图片

CSS3和HTML5的出现，为我们网页设计带来了许多方便和效果。其中，自动切换图片的功能，给展示类网页带来了很多帮助。下面，我们来详细了解一下如何通过CSS3和HTML5实现自动切换图片的效果。

首先，我们需要了解一下HTML5中新增的<figure>标签和<img>标签的一些属性。其中，<figure>标签用于把相关的图文注释在一起，而<img>标签有几个新增的属性可以让我们更好地控制图片的展示。这些属性包括：srcset，sizes，和alt。

<figure>
  <img src="small.jpg" srcset="medium.jpg 1000w,large.jpg 2000w" sizes="(max-width: 600px) 100vw,(max-width: 1200px) 50vw,33vw" alt="a beautiful photo">
  <figcaption>This is a beautiful photo</figcaption>
</figure>

在上面的代码中，我们使用了<figure>标签把图片和图片注释一起放在一起。而在<img>标签中，我们使用了srcset属性指定了不同分辨率下的图片来源，并使用了属性指定了不同大小的设备使用不同的图片。其中，<figcaption>标签用于为图片添加注释。

此时，如果我们打开这个页面，我们会发现，在不同大小的设备上，图片会自动切换显示，以适应不同的屏幕大小。这就是通过CSS3和HTML5实现图片自动切换的效果。