怎么让盒子中的img横向铺满div
时间: 2024-03-22 07:40:54 浏览: 156
可以通过CSS的属性设置来实现让盒子中的img横向铺满div的效果,具体的做法如下:
1. 设置盒子的样式为display: flex,这样盒子内的元素就会水平排列。
2. 设置img元素的样式为width: 100%;height: auto;这样图片就会自适应div的宽度,并保持高度不变。
3. 如果希望让图片横向平铺,可以设置img元素的样式为object-fit: cover;这样图片会按比例缩放,铺满整个盒子。
示例代码如下:
```
<div style="display: flex;">
<img src="your-image.jpg" style="width: 100%; height: auto; object-fit: cover;">
</div>
```
这样就可以实现让盒子中的img横向铺满div的效果了。
阅读全文