html中图片自适应代码

在HTML中，有时我们需要在网页中插入图片。但是不同的设备、浏览器以及屏幕大小都可能影响图片在网页上的显示效果。这时候，我们就需要使用图片自适应代码来让图片更好地适应各种不同的情况。

img {
  max-width: 100%;  /*让图片宽度在容器内不超过100%*/
  height: auto;     /*根据图片原始比例，自动计算高度*/
}

上述代码中，我们使用了CSS来对图片进行调整。通过定义max-width为100%，我们可以保证在任何情况下，图片都不会超出其容器的宽度，以免影响页面排版。同时，设定height为auto可以让浏览器自动根据图片原始比例计算图片的高度，使得图片保持原有比例。

另外，我们还可以使用@media查询来对不同设备的尺寸进行适应性调整。

@media screen and (max-width: 600px) {
  img {
    max-width: 100%;
  }
}

例如，上述代码可以在设备屏幕宽度小于600px时，自适应调整图片宽度为100%。

总之，通过合理地运用CSS中的自适应代码，我们可以轻松地让图片适应各种不同的场景，从而提高网页的用户体验。