CSS：如何强制背景图片拉伸/压缩以适应div，而不保持纵横比
在CSS中，background-size属性可以改变背景图像在元素中自适应的方式。
解决方法：使用CSS object-fit属性，具体参考https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit。
问题原因：尝试使用cover时，当div小于原始图像时，仍然保持纵横比，并且只是隐藏溢出。我需要图像自动拉伸或压缩以确保整个图像始终可见，完全忽略纵横比。
解决方法：你是否尝试过使用object-fit属性？
问题的原因是：在CSS中使用background属性设置背景图像时，设置了background-size为100% 100%，但是这会保持背景图像的纵横比，导致图像变形。
解决方法是：使用img标签作为div的子元素，并设置img的宽度和高度为100%，这样可以强制背景图像拉伸/压缩以适应div，而不保持纵横比。
以下是整理的文章：
CSS：如何强制背景图像拉伸/压缩以适应div，而不保持纵横比
在CSS中，我们经常需要将背景图像应用于div元素。然而，当我们使用background属性设置背景图像并将background-size设置为100% 100%时，图像通常会保持其原始纵横比，导致图像变形。那么，有没有一种方法可以强制背景图像拉伸/压缩以适应div，而不保持纵横比呢？
以下是两种解决该问题的方法：
方法一：使用background属性
我们可以使用background属性来设置div的背景图像，并通过设置background-size为100% 100%来拉伸/压缩图像。以下是一个示例：
div{
resize:both;
overflow:hidden;
width:200px;
height:300px;
background:url(https://picsum.photos/200/300)no-repeat 0 0;
background-size:100% 100%;
}
在上面的代码中，我们将div的resize属性设置为both，这样我们可以通过拖动div的边缘来调整其大小。overflow属性设置为hidden，以便在div的大小小于背景图像时隐藏溢出的部分。然后，我们设置div的宽度和高度为200px和300px，并使用background属性将背景图像应用于div。最后，我们使用background-size属性将背景图像拉伸/压缩以适应div的大小。
方法二：使用img标签
除了使用background属性，我们还可以使用img标签作为div的子元素，并将img的宽度和高度设置为100%。以下是一个示例：
div{
resize:both;
overflow:hidden;
height:300px;
width:200px;
}
img{
width:100%;
height:100%;
}
在上面的代码中，我们将div的resize属性设置为both，并将overflow属性设置为hidden，以便在div的大小小于img时隐藏溢出的部分。然后，我们设置div的宽度和高度为200px和300px。接下来，我们使用img标签将背景图像作为div的子元素，并将img的宽度和高度都设置为100%，这样可以强制背景图像拉伸/压缩以适应div的大小。
总结
通过使用background属性或img标签，我们可以实现将背景图像拉伸/压缩以适应div，而不保持纵横比。在使用background属性时，我们需要设置background-size为100% 100%；而在使用img标签时，我们需要将img的宽度和高度都设置为100%。
希望本文对你解决这个问题有所帮助！如有其他问题，请随时提问。
