1. 介绍
在移动设备上显示图片时，通常希望图片能够自适应屏幕大小，以便能够在不同设备上都能够正常显示。HTML提供了标签用于显示图片，而CSS则可以帮助我们实现图片的自适应屏幕大小的效果。在本文中，我们将介绍如何使用CSS实现这一目标。
2. CSS写法
要实现图片的自适应屏幕大小，我们可以使用CSS的max-width属性和height属性。通过将max-width属性设置为100%，我们可以确保图片的宽度不会超过其父元素的宽度，从而实现自适应屏幕大小的效果。而height属性设置为auto可以保持图片的高度与宽度的比例不变。
img {
max-width: 100%;
height: auto;
}
3. 应用
要在HTML中应用上述的CSS写法，只需要将其添加到对应的CSS文件中，或者通过<style>标签将其直接嵌入到HTML文件中即可。当然，也可以根据需要对max-width和height进行调整。
4. 示例
下面是一个示例，展示了如何使用CSS实现图片的自适应屏幕大小的效果。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
以保存以上代码为例，如下：
<img src="image.jpg">
</body>
</html>
5. 结论
通过使用CSS中的max-width属性和height属性，我们可以轻松实现图片的自适应屏幕大小的效果。这样可以保证图片在不同设备上的展示效果一致。需要注意的是，如果图片本身的宽度大于容器元素的宽度，图片会被缩小以适应容器大小。而如果图片本身的宽度小于容器元素的宽度，图片则会保持原始大小。这种方式既可以保证图片的显示效果，又能够提供用户友好的页面体验。