css实现图片自适应宽度 |css点击输入框效果

方式一：使用百分比

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

该方案的原理是基于img元素的宽度，将其设置为100%即可实现图片的自适应宽度。该方法适用于任何容器，比如div或li等。

方式二：使用max-width

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

该方案与方式一类似，只不过设置的是max-width属性。这样图片的宽度不会超过容器的宽度，同时只需要设置一次大小即可，不用担心分辨率问题。

方式三：使用object-fit

img {
object-fit: cover;
width: 100%;
height: 100%;
}

该方案实际上是通过CSS的新属性object-fit来生成图片的尺寸，并在容器中显示。其基本原理是将图片缩放并切割，以达到等比例的填充效果。

以上是实现图片自适应宽度的三种常见方式。开发时可以根据需要选择对应的方案。如果有其他有意思的实现方式，欢迎大家在评论区留言。