CSS给图片设定固定高度，但宽度变化时允许它缩小以保持纵横比

前端开发 2026-07-09

我有一个外层div，其中包含一个带图片的a 标签，如下所示：

<div class="wrapper">
    <a href="src" target="_blank">
        <img src="src" />
    </a>
</div>

我希望外层包裹元素的最大宽度为45%，并且当图片的自动宽度能够在这45% 内时，高度设为400px；如果不能满足，则高度尽可能高。该怎么实现？

我尝试了下面的方法，但是每当缩小浏览器窗口的宽度时，图片就会失真。

.wrapper {
    max-width: 45%;

    img {
        height: 400px;
        max-height: auto;
        width: auto;
        max-width: 100%;
    }
}

<div class="wrapper">
    <a href="https://inaturalist-open-data.s3.amazonaws.com/photos/348171794/large.jpeg" target="_blank">
        <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/348171794/large.jpeg" />
    </a>
</div>

解决方案

如果我理解你的需求正确，你想要类似这样的效果：

极小分辨率

如果浏览器窗口太小（或容器过窄），就会出现滚动条，但图片高度仍然是400px。
图片的最大宽度为容器的45%。

宽度很小，高度充足

如果浏览器窗口窄，但高度充足，图片会填满可用区域。
图片宽度最大为45%。

宽但高度不足

以及

图片宽度最大为45%，高度在400px时会被裁剪。

全屏

我使用的代码：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>Testing</title>
    <style>
      .wrapper {
        max-width: 45%;

        a,
        img {
          display: block;
          width: 100%;
        }

        a {
          overflow: hidden;
          max-height: 400px;
        }
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <a href="#">
        <img src="./test.png">
      </a>
    </div>
  </body>
</html>

如果这不是你想要的效果，你需要更新你的帖子，附上能说明你想要的效果的图片。

如果有人需要，这里是我实际使用的完整图片：