怎么让盒子中的img横向铺满div
时间: 2024-03-22 20:41:34 浏览: 177
可以使用CSS中的`object-fit`属性来实现。具体来说,你可以将盒子设为flex容器,然后将img元素设为flex项目,并且设置`object-fit: cover`属性,这样就可以让图片铺满整个div了。以下是一个示例的代码:
HTML代码:
```html
<div class="box">
<img src="your-image-url" alt="your-image" />
</div>
```
CSS代码:
```css
.box {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 300px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
```
上述代码中,我们将盒子设为flex容器,并且将img元素设为flex项目,然后设置了`object-fit: cover`属性,这样图片就可以横向铺满整个div了。同时,我们还设置了盒子的宽度和高度,以及`justify-content: center`和`align-items: center`属性,来居中显示图片。
阅读全文