Bootstrap div 边框占用空间
Posted
技术标签:
【中文标题】Bootstrap div 边框占用空间【英文标题】:Bootstrap div border taking spaces 【发布时间】:2021-05-14 02:39:21 【问题描述】:嗨!
我正在使用 bootstrap 4 并制作自己的项目。一段时间后,我发现了一个我无法解决的问题。我已将图像放入 div 部分,并使 div 的高度和宽度为 200px,溢出将被隐藏。然后我将图像的高度设置为 div 的 100%,并为 div 提供背景颜色(bg-light)和边框(5px 纯黑色)。 但是背景色在div的左上右各1px处可见,而图片放在左上右1px之后。
HTML:
<div class="profile-image-container">
<img class="profile-image" src="image.jpg" />
</div>
CSS:
.profile-image-container
width: 200px;
height: 200px;
border: 5px solid black;
overflow: hidden;
.profile-image
height: 100%;
【问题讨论】:
您的问题不清楚。你想做什么 ?并添加更多定义外部 div 的代码边框 你看到图片了吗? 是的!当然。 【参考方案1】:以下是原始问题的代码,带有占位符图像。
与发布到问题的图片不同,封闭的 div 和图片之间没有白色边框。
这可能是问题中未包含的一些额外 CSS,以说明 div 和图像之间的白色边框。
.profile-image-container
width: 200px;
height: 200px;
border: 5px solid black;
overflow: hidden;
.profile-image
height: 100%;
<body style="background-color:#e0e0e0; padding:0.5rem">
<div class="profile-image-container">
<img class="profile-image" src="https://via.placeholder.com/210x200" />
</div>
</body>
【讨论】:
【参考方案2】:我没有正确理解您的问题。请告诉我们您想要什么作为输出。 找到下面的代码,到目前为止我所理解的任何东西
<img class="profile-image" src="img.jpg" width=100% />
【讨论】:
如果您不确定,请在 cmets 中提问。答案部分不一定是为了咆哮或发泄沮丧。 我不想看到白色背景,请先看图。以上是关于Bootstrap div 边框占用空间的主要内容,如果未能解决你的问题,请参考以下文章
另一个 div 中的 div 没有占用其大小的 100%。它在左右两边留出相等的空间