css - 为什么我不能保持最大高度值的纵横比？

Question

我为肖像和风景图像使用了一个类。我所有的风景图像都具有相同的 1400x1000 像素大小(700x500 像素 5K 视网膜证明)。我希望肖像图像的高度和宽度始终为 700px，设置为自动，但它似乎并不能那样工作。为什么？

.size-m { /* project image portrait */
  max-height: 700px;
  width: auto;
 }

.size-xl { /* project image landscape */
 max-width: 700px;
 height: auto;
}

Answer 1

我可能误会了，但这在这些 jsfiddles 中似乎工作正常:

landscape

img {
  max-width: 700px;
  height: auto;
}

portrait

img {
  max-height: 700px;
  width: auto;
}