CSS img 自适应屏幕

在本文中，我们将介绍如何使用CSS实现图片在不同屏幕下的自适应。随着移动设备的普及，如何让网页中的图片在不同的屏幕大小下显示最佳效果，是一个需要注意的问题。下面我们来看看具体的实现方法。

阅读更多：CSS 教程

让图片自适应父容器大小

一个常见的需求是让图片自适应父容器的大小，让图片在任何屏幕上都显示为合适的大小。我们可以使用max-width: 100%;和height: auto;来实现。具体代码如下：

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

这样设置之后，图片就会在保持原有比例的同时，自适应父容器的宽度，避免了图片在小屏幕下变形或者溢出容器的问题。

响应式图片

当我们需要在不同大小的屏幕下显示不同尺寸的图片时，可以使用响应式图片的方式来解决。我们可以使用srcset属性来定义不同屏幕下展示的图片，并使用sizes属性来指定每个图片在哪些屏幕尺寸下展示。具体代码如下：

<img src="small.jpg" 
     srcset="large.jpg 800w, medium.jpg 500w, small.jpg 200w"
     sizes="(max-width: 400px) 200px, 
            (max-width: 800px) 500px, 
            800px">

上面的代码中，当屏幕宽度小于400px时，展示200w的small.jpg；当屏幕宽度小于800px时，展示500w的medium.jpg；否则展示800w的large.jpg。

背景图片自适应容器

我们也可以使用CSS让背景图片自适应容器大小。同样地，我们可以使用background-size属性来控制背景图片大小。具体代码如下：

div {
  width: 100%;
  height: 300px;
  background-image: url("example.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

上面的代码中，我们将div容器的宽度设置为100%，高度设置为300px，背景图片为example.jpg，不重复，自适应容器大小，并居中展示。