<p>我有一个带有标题的图像，就像这样：</p> <pre class="brush:php;toolbar:false;">&lt;figure&gt; &lt;img src="image.jpg"/&gt; &lt;figcaption&gt;标题&lt;/figcaption&gt; &lt;/figure&gt;</pre> <p>我在CSS中还有<code>img{max-width:100%}</code>。</p> <p>我想同时设置图像的宽度和高度，并在宽度减小到其设置值以下时保持其纵横比。所以，我尝试了这样的代码：</p> <pre class="brush:php;toolbar:false;">&lt;figure&gt; &lt;img src="image.jpg" width="100" height="200" style="object-fit:contain"/&gt; &lt;figcaption&gt;标题&lt;/figcaption&gt; &lt;/figure&gt;</pre> <p>这大致是我想要的，但是当图像被'letterboxed'时，标题离图像底部的距离很远。</p> <p>有没有办法在保持标题紧贴图像底部的同时获得我想要的结果？</p>

img {
  // 为了可读性，将您的样式声明移到这里
  width: 100px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

figure {
    display: block;
    width: 100px;
    max-width: 100%;
    height: 200px;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: blue;
}