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 根据需要占用尽可能多的空间

另一个 div 中的 div 没有占用其大小的 100%。它在左右两边留出相等的空间

如何在不占用空间的情况下使用 CSS 包含隐藏的 DIV?

使用 CSS3 转换 scale() 缩放/缩放 DOM 元素及其占用的空间

在部分上显示 gif 图像以占用空间