css 图片随页面缩小变化

CSS中有一个非常方便的属性可以使图片随着页面的缩小或拉伸而自适应大小，那就是“max-width”属性。当一个图像设置了max-width属性，它的实际宽度将自适应于其父元素的宽度，而且不会超出其自身的原始尺寸。

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

上面的代码与“height: auto”的组合表明，它将在保持图像宽高比的同时，根据实际的设备大小和浏览器调整其大小。如果您不希望它小于其最初大小，则可以使用“min-width”属性将其设置为最小尺寸。

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

这意味着图像将在达到其最初宽度之前，一直自适应于父元素的大小。这样，当您缩小浏览器窗口大小时，图像将缩小到其最小宽度，在那之后就不会再缩小了，这在响应式设计中非常有用。

带有“max-width”属性的图像也很有用，因为它可以避免制作图像时出现的大小错误，避免图像变形，而且也更易于维护和管理。