解决BootStrap轮播图片中图片大小和父div不一致问题

简介: 解决BootStrap轮播图片中图片大小和父div不一致问题

问题出现


其实这个问题相当简单,自己鼓捣好久,才发现还是自己基本功不扎实,当图片的大小出现在原生的bootstrap类属性限定中,图片会按照自己的大小进行布局,这样就会出现图片小于父div的情况,如下图所示:

1665653395980.jpg


问题解决


找出图片所属类,更改类的属性为block,设置图片的高度为父div的高度,代码如下:


#showCarousel  .carousel-inner > .item > img {
    display: block;
    width:100%;
    height:父div的高度;
}

父div包含id=showCarousel的div

结果展示


如下图所示:

1665653441201.jpg

图片充满了整个布局,以后遇到这种高度问题,首先想一下要不要将该元素的转换为块级元素。


相关文章
N..
|
5月前
|
开发框架 前端开发 JavaScript
Bootstrap轮播图
Bootstrap轮播图
N..
75 1
|
12月前
|
前端开发
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
12月前
|
前端开发 JavaScript 索引
|
5月前
|
前端开发
Bootstrap 5 保姆级教程(十):导航栏 & 轮播
Bootstrap 5 保姆级教程(十):导航栏 & 轮播
|
5月前
|
前端开发
BootStrap 5 保姆级教程(三):表格 & 图片
BootStrap 5 保姆级教程(三):表格 & 图片
|
12月前
|
开发框架 前端开发 JavaScript
Bootstrap01【前端开发框架】家居商城首页之导航&轮播图
Bootstrap01【前端开发框架】家居商城首页之导航&轮播图
|
前端开发 JavaScript
Bootstrap 图片样式
Bootstrap 图片样式
38 0
|
前端开发 JavaScript 索引
前端|Bootstrap 实例 - 简单的轮播插件
前端|Bootstrap 实例 - 简单的轮播插件
242 0
|
前端开发 JavaScript iOS开发
如何使用bootstrap实现轮播图?
如何使用bootstrap实现轮播图?
163 0
如何使用bootstrap实现轮播图?