具有流体父容器不工作的图像的css max-width = 100％属性

Question

我有流畅的布局设计。每个容器的宽度都设置为百分比。

我试图给出以下css，使得大于父容器比例的图像适合它，而小于容器的图像有自己的宽度。

.imgClass {
  display:block;
  width: auto;
  max-width: 100%;
  height: auto;
}

这在Chrome中运行良好。但不适用于Firefox和IE9。 我还放了width: 100%;而不是width: auto;，这解决了大于容器的图像问题。但是如果图像小于容器。它变得更宽（适合100％）并且图像变得模糊。

Answer 1

这应该足够了，除非你的图像上有内联属性维度

.imgClass {
display:block;
 max-width: 100%;

}

Answer 2

是的，就像约翰斯克所说的那样。

  

但是如果图像小于容器。它变得更宽（适合100％）并且图像变得模糊。

当然，它会模糊，因为图像小于容器。