100% 宽度的图像，保持最小高度的比例答案

【问题标题】：100% width image, keep ratio with min-height100% 宽度的图像，保持最小高度的比例
【发布时间】：2013-04-07 22:19:56
【问题描述】：

我希望图像为 100%，但当图像达到此高度时，min-height 为 500 像素，我希望保持比例（基本上）关闭 100% 宽度。我知道这可以通过 javascript 实现，但我从未见过用 css 完成。有可能吗？

【问题讨论】：

问题不清楚。您能否举例说明您希望使用各种尺寸的图像会发生什么？
希望我理解这一点。如果你想在 500px 高度之后图像宽度 100%，你可以使用 @mediaquery (min-height: 500px) { img {width: 100%;} }
他们以您的方式写了您的问题，我知道您不需要min-height，而是需要max-height。
你需要让你的问题更清楚，并包含一些 CSS+HTML。
我基本上想设置min-width而不知道图像的可变宽度。我知道我希望 min-height 成为 500px。如果我设置width:100%;min-height:500px，那么这个比例就会变得异常。

标签： css

【解决方案1】：

html

<img src="/path.jpg" />

CSS

img { min-height: 500px; }

通知

只要确保您没有在元素中或在 CSS 中为上部元素定义此图像的宽度即可。如果一切正常 - 图像将被缩放到最小高度保持率。

请记住使用比您的最小高度更大的图像——否则会很丑。

【讨论】：