gpt4 book ai didi

html - 如何使图像占据屏幕的整个宽度? (HTML,CSS)

转载 作者:太空宇宙 更新时间:2023-11-04 01:04:47 31 4
gpt4 key购买 nike

正如标题所说,我只是想知道如何删除右侧、左侧和顶部导航栏之间剩余的白色边框,以便图像占据整个宽度。

enter image description here

这是我尝试编写的代码(有 Bootstrap ):

CSS:

.img_banner {
min-height : 100%;
min-width : 100%;
background-size:100% 100%;
overflow-y: hidden;
overflow-x: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

HTML

  <div class="container-full col-md-12">
<img src="img/banner1.jpg" class="center-block img_banner img-responsive portfolio-box">
</div>

最佳答案

空白通常是由正文中的边距引起的。尝试添加

margin: 0;

到正文元素


编辑

我刚刚意识到你说你正在使用 bootstrap,我最好的猜测是列元素的左右两侧有 15px 的填充。所以尝试在行元素中添加设置这些属性:

margin-left: -15px;
margin-right: -15px;
width: calc(100% + 30px);

关于html - 如何使图像占据屏幕的整个宽度? (HTML,CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52474679/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com