如何在不影响较小图像的情况下使网页上的图像适合最大宽度？答案

【问题标题】：How do I make images on a webpage fit inside a max width WITHOUT compromising smaller images?如何在不影响较小图像的情况下使网页上的图像适合最大宽度？
【发布时间】：2016-08-27 22:13:16
【问题描述】：

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

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

我环顾四周，但找不到能产生结果的说法。如果这不能通过 CSS 完成，如果需要，我还可以使用 PHP。

感谢您的阅读和任何帮助！

【问题讨论】：

v__v 好的，所以我发现的每个帖子都说由于某种原因具有“宽度：100%”以及定义最大宽度，所以这就是为什么它对我不起作用。事实证明，如果你只定义一个最大宽度，它就可以很好地工作。

标签： php html css image

【解决方案1】：

使用纯 CSS 你可以做到这一点：

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

注意：这是 IE8+ 和其他最新的浏览器。见：http://caniuse.com/#search=max-width

【讨论】：

auto 在前两个中到底做了什么？
哦，好吧。我把它放在上面的评论中，但由于某种原因，我能找到的所有帖子都说由于某种原因宽度为 100%：/ Idk 为什么会这样，也许他们只是对最大化空间或其他东西感兴趣。不过感谢您的帮助。
如果您有 FireFox，请下载/安装 FireBug 扩展。如果您有 Chrome，请使用 Chrome 检查器。

【解决方案2】：

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

U 也可以使用 100 以上的 % 这将放大图像尺寸。

问候！

【讨论】：