css 图片 屏幕大小变化而变化

在设计网页时，经常需要将图片与 CSS 样式结合在一起，优化网页的布局。然而，由于不同设备和屏幕的尺寸不同，图片的大小以及网页布局也会随之改变。这时，我们需要使用 CSS 的一些特性，使图片能够根据屏幕大小进行适当的缩放。

为了实现这一点，可以使用 CSS 的 max-width 属性来设置图片最大的宽度，以及height:auto 属性使高度自适应：

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

在上述 CSS 中，我们设置图片最大宽度为 100%，这意味着图片的大小会根据屏幕宽度进行自适应，同时保持高度与宽度的比例不变。这种方法可以确保无论何种大小的设备都可以正确显示图片。

此外，在使用不同尺寸的图片时，我们也可以使用 CSS 的 srcset 属性。它可以指定不同分辨率的图片，并在图片需要变化时选择最合适的一张，在不同分辨率的设备上改善网页加载速度。例如：

<img src="small.png" srcset="small.png 320w,medium.png 640w,large.png 1024w,xlarge.png 1440w"
     sizes="(max-width: 320px) 280px,(max-width: 640px) 600px,(max-width: 1024px) 1000px,1440px"
     alt="A cute kitten">

在上面的代码中，我们定义了四种不同分辨率的图片。根据设备和屏幕的大小，选择最适合的分辨率，并且在屏幕大小变化时进行适当的调整。

综上所述，结合 CSS 样式和图片属性，可以使图片在各种设备和屏幕上得到正确地显示和布局。这不仅提高了网页的用户友好性，也增加了网页在不同设备上的适应性。