为什么我不能将纵横比保持在最大高度值？

Question

我为我的肖像和风景图像使用了一个类。我的所有风景图像都具有1400x1000px（700x500px 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;
}

Answer 2

将display: block添加到您的课程中。这应该可以解决问题。