Bootstrap div 边框占用空间答案

【问题标题】：Bootstrap div border taking spacesBootstrap div 边框占用空间
【发布时间】：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 的代码边框
你看到图片了吗？
是的！当然。

标签： html css bootstrap-4

【解决方案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 中提问。答案部分不一定是为了咆哮或发泄沮丧。
我不想看到白色背景，请先看图。