CSS - 当宽度会迫使它变形时，保持高度为 100% 的图像比例？答案

【问题标题】：CSS - Maintain image ratio whose height is 100% when its width would force it to deform?CSS - 当宽度会迫使它变形时，保持高度为 100% 的图像比例？
【发布时间】：2014-01-28 23:45:43
【问题描述】：

我有一个高度设置为 100% 的图像。只要有足够的宽度，这会使图像正确显示，正如我所期望的那样。但是，当屏幕的宽度减小时，最终图像会失去它的比例，因为宽度被挤压而高度仍然保持 100%。我想让图像始终在容器内拉伸到最大尺寸而不会丢失它的比例。换句话说，如果宽度是限制因素，图像应该使用 100% 宽度并保持比例，但如果高度是限制因素，则图像应该使用 100% 高度同时保持比例，并且应该能够在这些之间切换。有没有办法纯粹在 CSS 中做到这一点？谢谢！

【问题讨论】：

你说的是全屏图片吗？我们能看到一些 HTML 吗？
height:auto 将保持纵横比...但是您想按高度或宽度进行拉伸...两者都不能使用 css 完成！！
@NoobEditor：所以没有办法设置它，以便 css 只确定高度或宽度是限制因素并在此基础上拉伸它？你是说我必须为此使用 JS？

标签： html css image

【解决方案1】：

这应该保持正确的比例（前提是您不需要出于某种原因将高度设置为 100%）。

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

--编辑--

如果您想保持父元素的高度一致，那么您可以：

使用overflow: hidden; 隐藏溢出的图像。虽然这意味着您将丢失一些较大尺寸的图像。 See example.
使用max-width 和max-height 停止图像在某一点。这意味着您可能会留下一些设计中的留白。 See example.

【讨论】：

虽然如此，如果容器的高度小于图像的高度，则图像只会延伸出容器。他们是一种确保高度也会限制图像大小并仍然保持比例的方法吗？
有几种方法可以潜在地解决您的问题： 1. 您可以定义图像容器 div 的高度并将其设置为overflow: hidden;。这样做会隐藏大尺寸图像时的任何溢出——显然你会丢失一些图像。 Example 1 2. 您可以在图像上使用max-width 和max-height 来阻止它在达到所需的最大尺寸时停止放大——尽管这可能会在您的页面上留下一些空白。 Example 2。如果这些有任何帮助我会更新