css手机背景图不拉伸 |css3滑块

background-size: cover;

通过以上代码，可以让背景图片以尽可能大的尺寸显示，但不会拉伸。这是最常用的方法，可以让图片自适应手机屏幕大小，从而避免拉伸问题。

background-size: contain;
background-repeat: no-repeat;
background-position: center center;

如果图片宽高比不合适，cover 可能会导致部分区域被裁剪从而影响美观。这种情况下，contain 可以让背景图完全展示在容器中，而且不会拉伸。配合使用 background-repeat 和 background-position 可以让图片居中显示。

background-size: 100% auto;

如果想让图片宽度自适应页面而高度按比例自动调整，则可以使用上面的方法 background-size，该方法将自动根据容器宽度自适应比例进行缩放。

总之，以上是一些常用的不拉伸手机背景图的技巧。大家可以根据自己的需求和喜好来选择不同的方法和参数，从而达到最佳的视觉体验。