1. 使用background-size: cover;
background-size: cover;是最常用的方法，它会保持图片的原始纵横比，但会尽可能地将图片放大或缩小以填充整个元素。这意味着，如果图片的宽度大于元素的宽度，那么图片的高度会被压缩；如果图片的高度大于元素的高度，那么图片的宽度会被压缩。
例如：
div {
background-image: url('image.jpg');
background-size: cover;
}2. 使用background-size: 100% 100%;
background-size: 100% 100%;会使图片的宽度和高度都等于元素的宽度和高度。这意味着，如果图片的纵横比与元素的纵横比不同，那么图片可能会被裁剪。
例如：
div {
background-image: url('image.jpg');
background-size: 100% 100%;
}3. 使用background-size: contain;
background-size: contain;会使图片的宽度和高度都尽可能小，以适应元素的宽度和高度。这意味着，图片可能会被裁剪。
例如：
div {
background-image: url('image.jpg');
background-size: contain;
}4. 使用background-size: 100% auto;或background-size: auto 100%;
background-size: 100% auto;会使图片的宽度等于元素的宽度，高度自动调整。background-size: auto 100%;会使图片的高度等于元素的高度，宽度自动调整。这两种方法都会使图片保持原始的纵横比。
例如：
div {
background-image: url('image.jpg');
background-size: 100% auto;
}或者：
div {
background-image: url('image.jpg');
background-size: auto 100%;
}以上就是在CSS中让背景图片拉伸的方法。你可以根据你的需要选择合适的方法。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/129601.html
微信扫一扫 