Добавить рамку / рамку к изображению без изменения размера изображения

Question

Я хочу добавить рамку к своему изображению. Но с границами изображения сжимаются.

Это мой код:

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

<div class="border border-black img-border">
</div>
<img class="img-fluid shadow bg-white" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/a3efe622972119.5631b3f61e688.gif">

Но я чувствую, что это очень неправильно.

Answer 1

Два решения:

• Используйте вставку box-shadow с 0 размытием и 1px разбросом. Вы можете сделать это на самом img, чтобы избежать элемента оболочки. Тени не влияют на макет, как это делают границы.
• Используйте png как background-image и установите background-origin на border-box. Дайте этому элементу границу. background-origin контролирует, где фон начинает рисовать. ( документация MDN для background-origin)