CSS img嵌入框阴影技巧+中心(v + h)锚点+最大高度

I'm trying to apply the trick I found here to add an inset box-shadow on the pictures of my gallery, however, I heve 3 problems:

  1. 然后,我无法在容器中垂直和水平居中放置图像并围绕锚点
  2. 我无法限制图像高度,因此它可以像我可以最大宽度垂直放置在所述容器中
  3. 阴影在图像底部溢出

Here is my gallery as it is now, working good but without box-shadow: https://jsfiddle.net/GaetanL/vLrt7o1m/17/

HTML:

<div class="gallery">
  <div class="picture-frame">
    <img src="https://static.passeportsante.net/i93408-.jpeg">
  </div>
  <div class="picture-frame">
    <img src="https://www.wimadame.com/wp-content/uploads/2019/12/La-nature-me-parle.jpeg">
  </div>
</div>

CSS:

body {
  background-color: purple;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

.picture-frame {
  display: flex;
  background-color: white;
  border-style: solid;
  border-color: lightgrey;
  box-shadow: 6px 6px 6px;
  height: 200px;
  width: 200px;
  margin: 0 36px 36px 0;
  padding: 12px;
  border-width: 1px;
}
.picture-frame img {
  max-width: 100%;
  max-height: 100%; /* for chrome & firefox */
  object-fit: contain; /* for edge */
  margin: auto;
}

And here is where I got so far, showing all the problems above: https://jsfiddle.net/GaetanL/07wmxe6a/24/

HTML:

<div class="gallery">
  <div class="picture-frame">
    <a class="img-shadow">
      <img class="img-image" src="https://static.passeportsante.net/i93408-.jpeg">
    </a>
  </div>

  <div class="picture-frame">
    <a class="img-shadow">
      <img class="img-image" src="https://www.wimadame.com/wp-content/uploads/2019/12/La-nature-me-parle.jpeg">
    </a>
  </div>
</div>

CSS:

body {
  background-color: purple;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

.picture-frame {
  background-color: white;
  border-style: solid;
  border-color: lightgrey;
  box-shadow: 6px 6px 6px;
  height: 200px;
  width: 200px;
  margin: 0 36px 36px 0;
  padding: 12px;
  border-width: 1px;
}

.img-shadow {
  position: relative;
  float: left;
}

.img-shadow::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 8px rgba(0,0,0,.6);
    -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}

.img-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: auto;
}