css如何让图片适应屏幕大小

在网页设计过程中，经常会遇到图片展示的问题。如何让图片在不同的屏幕大小下展示得恰到好处呢？这就要用到CSS来控制图片的大小。 首先，我们可以使用CSS的width属性来控制图片的宽度。如果我们想让图片在屏幕中等比例缩放，可以将width属性设置为100%，这样图片的宽度就会根据屏幕大小自动调整。

img{
   width: 100%;
}

如果我们不想让图片在屏幕中等比例缩放，而是想让它自适应屏幕宽度，可以将max-width属性设置为100%。

img{
   max-width: 100%;
}

此时，图片的宽度会根据屏幕的大小来调整，但是图片的高度并不会自适应。这时，我们可以使用CSS的height属性来控制图片的高度。 如果我们设置图片的高度为一个固定值，那么图片就会按照这个固定值来展示。

img{
   height: 200px;
}

如果我们想让图片的高度自适应屏幕大小，可以将height属性设置为auto，这样图片的高度就会根据宽度自动调整，并且保持原始比例。

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

通过这些CSS属性的设置，我们可以让图片在不同的屏幕大小和分辨率下展示得更加美观。同时，我们也可以在CSS中设置图片的其他样式，如边框、圆角、阴影等，来让图片更加生动和有趣。