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>

在flex容器中用链接包围img会导致img忽略容器边界

1 个答案: