解决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..
|
9月前
|
开发框架 前端开发 JavaScript
Bootstrap轮播图
Bootstrap轮播图
N..
126 1
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
3月前
|
容器
Bootstrap5 轮播1
Bootstrap5 轮播组件用于创建循环播放的幻灯片效果。通过设置 `carousel` 类和 `data-bs-ride="carousel"` 属性,结合指示符、图片容器和切换按钮,可实现自动或手动切换的图片轮播。
Bootstrap5 轮播1
|
前端开发 JavaScript 索引
|
9月前
|
前端开发
Bootstrap 5 保姆级教程(十):导航栏 & 轮播
Bootstrap 5 保姆级教程(十):导航栏 & 轮播
|
9月前
|
前端开发
BootStrap 5 保姆级教程(三):表格 & 图片
BootStrap 5 保姆级教程(三):表格 & 图片
|
开发框架 前端开发 JavaScript
Bootstrap01【前端开发框架】家居商城首页之导航&轮播图
Bootstrap01【前端开发框架】家居商城首页之导航&轮播图
|
前端开发 JavaScript
Bootstrap 图片样式
Bootstrap 图片样式
48 0
|
前端开发 JavaScript 索引
前端|Bootstrap 实例 - 简单的轮播插件
前端|Bootstrap 实例 - 简单的轮播插件
264 0