如果我将 Flexbox 中的图像设为链接，则它们不会调整大小

Question

我有一个由三个方形图像组成的弹性盒，我想在缩小或扩大浏览器窗口时调整它以适应浏览器窗口的大小。我已经成功做到了这一点。但是，我希望每个图像都是一个链接。当我尝试这样做时，图像不再放大或缩小。

这是图像不是链接的代码，并且图片会根据我的需要调整大小：

HTML：

<div class="container">

  <img src="001.jpg">
  <img src="002.jpg">
  <img src="003.jpg">

</div>

CSS：

.container {
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.container img {
  overflow: hidden;
  flex: 1 1 400px
}

我尝试过例如：

<a href="website.html"><img src="001.jpg"></a>

并将 CSS 的第二部分更改为

.container a

而不是

.container img

但是这个或我尝试过的其他解决方案不起作用，因为当我更改窗口大小时图像不会增大或缩小。

Answer 1

将图像宽度设置为 100%，以便它们覆盖锚元素的整个宽度，然后它将按预期工作

.container {
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.container a {
  overflow: hidden;
  flex: 1 1 400px;
}

img {
  width: 100%;
}

<div class="container">
  <a href="https://stackoverflow.com/"><img src="https://picsum.photos/id/1/200"></a>
  <a href="https://stackoverflow.com/"><img src="https://picsum.photos/id/11/200"></a>
  <a href="https://stackoverflow.com/"><img src="https://picsum.photos/id/111/200"></a>
</div>