How can I set the border around the image itself and not what it occupies?

I have a div containing an image. I want the image, regardless of whether it's larger or smaller than the div containing it, to be as large as possible so it fits within the div without changing the aspect ratio. I can achieve this with my code, but I also want to put a border around the image. By doing this, the border surrounds the entire container and not just the displayed image. What's the solution? Thanks in advance.

Here is my code:

.divClass {
  position: absolute;
  top: 15%;
  width: 32%;
  height: 82.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgClass {
  width: 100%;
  height: 100%;
  border: 1px solid rgb(118, 180, 255);
  object-fit: contain;
}

<div class="divClass">
  <img class="imgClass" src="url_of_image" />
</div>

Here I put 2 sample images to show my problem (it does not mean that the code must be valid for those specific images, but for any):

I would like, as I say, for the border to be around and attached to the images.

Edit: To be clear, I also want that if my image is smaller than the container it expands to the maximum possible size without changing the aspect ratio.

Solution

You can do this without JS if you put another copy of the image into the HTML.

This is so you can use drop-shadow to draw the borders, but if you do all 4 on one image the second pair goes outside the first (you get a double border).

This snippet places an image position absolute behind the one the user will actually see, but it has the same dimensions.

We use object-fit: contain which ensures the image scales up to fit either the width or height of the container if its natural dimensions are smaller, and scales down to fit either the width or height of the container if its natural dimensions are larger.

Note: purely for the demo the position of the div is changed to relative (so the various images don't sit on top of one another) but of course fine to return to absolute in practice if that is what is required.

Note also that this method does not work if you want a rectangular border around an image which has transparency at the edges (i.e. it'll be fine for .jpgs but not necessarily for some .pngs).

<h3>Image's natural dimensions: 200px X 300px</h3>
<div class="divClass">
  <img class="borderClass" src="https://picsum.photos/id/1016/200/300">
  <img class="imgClass" src="https://picsum.photos/id/1016/200/300">
</div>

<h3>Image's natural dimensions: 300px X 200px</h3>
<div class="divClass">
  <img class="borderClass" src="https://picsum.photos/id/1016/300/200">
  <img class="imgClass" src="https://picsum.photos/id/1016/300/200">
</div>

<h3>Image's natural dimensions: 200px X 200px</h3>
<div class="divClass">
  <img class="borderClass" src="https://picsum.photos/id/1016/200/200">
  <img class="imgClass" src="https://picsum.photos/id/1016/200/200">
</div>
<h3>Image's natural dimensions: 2000px X 3000px</h3>
<div class="divClass">
  <img class="borderClass" src="https://picsum.photos/id/1016/2000/3000">
  <img class="imgClass" src="https://picsum.photos/id/1016/2000/3000">
</div>
<h3>Image's natural dimensions: 3000px X 2000px</h3>
<div class="divClass">
  <img class="borderClass" src="https://picsum.photos/id/1016/3000/2000">
  <img class="imgClass" src="https://picsum.photos/id/1016/3000/2000">
</div>

<h3>Image's natural dimensions: 2000px X 2000px</h3>
<div class="divClass">
  <img class="borderClass" src="https://picsum.photos/id/1016/2000/2000">
  <img class="imgClass" src="https://picsum.photos/id/1016/2000/2000">
</div>
<style>
  body {
    width: 100vw;
    height: 100vh;
  }

  .divClass {
    position: relative;
    width: 32%;
    height: 82.5%;
    width: 32vw;
    height: 82.5vh;
    --c: rgb(118, 180, 255);
  }

  .divClass img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }

  .borderClass {
    position: absolute;
    filter: drop-shadow(-10px 10px var(--c)) drop-shadow(10px -10px var(--c));
  }

  .imgClass {
    filter: drop-shadow(10px 10px var(--c)) drop-shadow(-10px -10px var(--c));
  }
</style>