在不更改图像尺寸的情况下向图像添加帧/边框

Question

我想在图像中添加边框，但边框会缩小

<div class="border border-black img-border">
    <img class="img-fluid shadow bg-white" src="1.png">
</div>

我用下面的代码修复了

<div class="border border-black img-border">
</div>
<img class="img-fluid shadow bg-white" src="1.png">

.img-border {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;"
}

但是我觉得这很不对劲

Answer 1

两种解决方案：

• 使用带有box-shadow模糊和0扩展的插图1px。您可以在img本身上执行此操作，以避免使用wrapper元素。阴影不会像边框那样影响布局。
• 将png用作background-image，并将background-origin设置为border-box。给同一元素加上边框。 background-origin控制背景开始绘制的位置。 （MDN documentation for background-origin）