css图片等比缩放且充满盒子

为了使图片在CSS中等比缩放并充满整个容器，可以使用object-fit属性配合width或height属性。以下是一个示例代码：

<div class="container">
    <img src="path/to/your/image.jpg" alt="Responsive Image">
</div>

.container {
    width: 300px; /* 或者其他固定宽度 */
    height: 200px; /* 或者其他固定高度 */
    overflow: hidden; /* 防止图片溢出容器 */
}
 
.container img {
    width: 100%; /* 使图片宽度等比缩放至容器宽度 */
    height: 100%; /* 使图片高度等比缩放至容器高度 */
    object-fit: cover; /* 图片将覆盖整个容器，但可能被裁剪 */
}

在这个例子中，.container是图片的容器，.container img定义了图片如何在容器内显示。object-fit: cover确保图片会覆盖整个容器，但是可能会被裁剪以保持图片的宽高比。如果你想要图片不被裁剪，可以使用object-fit: contain，但这可能导致图片不能完全填充容器。