css3怎么让图片自适应

什么是图片自适应

图片自适应是指在浏览器窗口大小发生变化时，图片可以自动调整大小和位置以适应屏幕大小，从而达到更好的用户体验。

如何让图片自适应

要让图片自适应，我们可以使用CSS3的新特性——弹性盒子布局。通过将图片包裹在弹性盒子容器中，我们可以轻松地实现图片的自适应效果。

  .container {
    display: flex; /* 将容器设置为弹性盒子 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  
  .container img {
    max-width: 100%; /* 设置图片最大宽度为100% */
    height: auto; /* 高度自适应 */
  }

使用以上代码，我们可以将图片包裹在一个弹性盒子容器中，设置图片的最大宽度为100%，当浏览器窗口缩放时，图片就会自适应大小。

其他注意事项

除了使用弹性盒子布局外，我们还可以使用max-width属性来限制图片的宽度，从而达到自适应效果。另外，可以使用srcset属性来为不同分辨率的设备提供不同尺寸的图片。

  <img src="example.jpg" srcset="example.jpg 500w, example_2x.jpg 1000w" sizes="(max-width: 600px) 500px, 1000px" alt="example">

以上代码中，我们为图片提供了两个版本，一个是宽度为500像素的普通版本，另一个是宽度为1000像素的高清版本。通过修改sizes属性，我们可以根据不同设备的屏幕宽度，选择不同大小的图片。