围绕IMG带有链接的链接容器中的链接会导致IMG忽略容器边界

Question

我有一个页面，其中包含flexbox容器中的图像行。我正在尝试将这些图像链接到它们的源图像，以及用<a>标签围绕图像时，该图像不再符合其父容器的边界。我意识到这可能是因为<a>标签成为<img>标签的父，但我正在从父容器中继承属性，因此<a>标签应相同。

。

如何使用此设置来获取图像以尊重350x225边界？

与链接：

.frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.frame-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin-top: 5%;
}
.frame-item {
  position: relative;
  width: 350px;
  height: 225px;
  max-width: 31%;
}
.frame-item a {
  width: inherit;
  height: inherit;
  max-width: inherit;
}
.frame-item>img {
  width: 100%;
  height: 100%;
}

<div class="frame-row">
  <div class="frame-item">
    <a href="http://placehold.it/1000">
      <img src="http://placehold.it/1000">
      <div class="item-overlay">
        <p>Grand Royale Ct.<br> Alamo, CA</p>
      </div>
    </a>
  </div>
</div>

没有链接：

.frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.frame-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin-top: 5%;
}
.frame-item {
  position: relative;
  width: 350px;
  height: 225px;
  max-width: 31%;
}
.frame-item a {
  width: inherit;
  height: inherit;
  max-width: inherit;
}
.frame-item>img {
  width: 100%;
  height: 100%;
}

<div class="frame-row">
  <div class="frame-item">
    <img src="http://placehold.it/1000">
    <div class="item-overlay">
      <p>Street<br> City, State</p>
    </div>
  </div>
</div>

Answer 1

.frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.frame-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin-top: 5%;
}
.frame-item {
  position: relative;
  width: 350px;
  height: 225px;
  max-width: 31%;
}
.frame-item a {
  width: inherit;
  height: inherit;
  max-width: inherit;
}
.frame-item a>img {
  width: 100%;
  height: 100%;
}

<div class="frame-row">
  <div class="frame-item">
    <a href="http://placehold.it/1000">
      <img src="http://placehold.it/1000">
      <div class="item-overlay">
        <p>Grand Royale Ct.<br> Alamo, CA</p>
      </div>
    </a>
  </div>
</div>