css3 给背景图片加宽和高

CSS3提供了各种方式来设置背景图片的宽度和高度。这些方法可以让你更好的调整背景图像的尺寸以适应不同的设计要求。

background-size: width height;
    background-size: auto height;
    background-size: width auto;
    background-size: cover;
    background-size: contain;
    

1. 设置width和height

使用这种方法，你可以直接设置背景图片的宽度和高度。这适用于那些已经知道背景图片准确尺寸的情况。

background-size: 800px 600px;
    

2. 自动调整height

如果你想保持图片的宽度，但是把高度设置为自适应，请使用下面这种方法：

background-size: auto 600px;
    

3. 自动调整width

如果你想保持图片的高度，但是把宽度设置为自适应，请使用下面这种方法：

background-size: 800px auto;
    

4. 使用cover

使用cover来设置背景图片时，图片将尽可能的填满整个容器，同时保持纵横比例不变，如果图片比容器小则进行拉伸，如果比容器大则进行裁剪。

background-size: cover;
    

5. 使用contain

使用contain来设置背景图片时，图片将尽可能的显示整张图片，同时保持纵横比例不变，如果图片比容器小则进行放大，如果比容器大则进行缩小。

background-size: contain;
    

CSS3提供了多种方式来调整背景图片的大小，你可以根据需要选择合适的方法。这些方法可以帮助你更好的控制布局，提高用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！