最好在应该尊重纵横比的尺寸上使用auto。如果你没有将另一个属性设置为auto，现在大多数浏览器会假设你想要尊重纵横比例，但不是所有的浏览器都这样(例如，windows phone 8上的IE10就不这样)。

width: 100%;
height: auto;

通过将CSS的max-width属性设置为100%，图像将填充它的父元素的宽度，但不会呈现比它的实际大小更大，从而保持分辨率。

将height属性设置为auto可以保持图像的纵横比，使用这种技术可以覆盖静态高度，并使图像能够在各个方向上按比例伸缩。

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

使用JQuery，因为CSS是一个普遍的误解(这里关于简单设计目标的无数问题和讨论表明了这一点)。

用CSS做你想做的事情是不可能的:图像的宽度应该是100%，但如果这个宽度导致高度太大，max-height应该应用-当然正确的比例应该被保留。

我将此用于高度和宽度固定的矩形容器，但图像大小不同。

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

简单优雅的工作解决方案:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

也有同样的问题。对我来说，问题是高度属性也已经在其他地方定义，像这样固定它:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}