[分享]css列表图片自适应

在网站开发中，经常会用到列表和图片。但是在不同设备上，不同分辨率下看到的效果可能会不同。因此，我们需要使用 css 让列表和图片自适应。首先，我们需要使用一个 ul 标签来创建列表，代码如下： 列表1...

在网站开发中，经常会用到列表和图片。但是在不同设备上，不同分辨率下看到的效果可能会不同。因此，我们需要使用 css 让列表和图片自适应。

首先，我们需要使用一个 ul 标签来创建列表，代码如下：

<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ul> 

接下来，我们希望在列表中添加一些图片，使其更加生动。我们可以在 li 标签中使用 img 标签来添加图片，代码如下：

<ul>
  <li><img src="图片1.jpg" alt="图片1">列表1</li>
  <li><img src="图片2.jpg" alt="图片2">列表2</li>
  <li><img src="图片3.jpg" alt="图片3">列表3</li>
</ul> 

现在，我们需要让图片自适应，在不同设备上都能够正确显示。这时，我们可以使用 CSS 中的 max-width 和 max-height 属性来实现图片的自适应。我们可以定义一个样式如下：

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

在这个样式中，我们为 li 标签下的 img 标签设置了 max-width 和 max-height 属性，分别表示图片的最大宽度和最大高度。当图片超出这个大小时，就会自动缩放，以适应当前设备的屏幕大小。

通过这个方法，我们就可以让列表和图片都能够自适应，在不同设备上都能够正常显示，提高了网页的可读性和可访问性。