如何使网页上的图像适合最大宽度，而不会影响较小的图像？

Question

我的网站设置了博客。想象一下文章的空间有限，我想要定义一个区域，在文章的顶部有一个永远不会超过最大宽度的图像。到目前为止我所拥有的是用于定义max-width等的基本CSS样式。我想知道的是如何控制它以使较小的图像不受影响？

即。因此，如果我有700px的空间，大于700px的图像将缩小尺寸，但小于700px的图像将保持不变，可能保持居中或任何我想要的。

我环顾四周，却无法找到可以产生结果的方法。如果无法通过CSS完成此操作，我还可以在必要时使用PHP。

感谢阅读和任何帮助！

Answer 1

使用纯CSS可以执行此操作：

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

注意：这是IE8 +等最新浏览器。请参阅：http://caniuse.com/#search=max-width

Answer 2

你可以试试％而不是px。 这将自动调整图像大小。 尝试使用％或am，因为它在所有屏幕尺寸上显示相同的结果。

U也可以使用％100以上，这将放大图像大小。

问候！