为什么我不能保持最大高度值的长宽比？

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中似乎工作正常：

景观

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

肖像

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

Answer 2

添加display: block您的课程。 这应该够了吧。