css - 100% 宽度的图像，保持最小高度的比例

Question

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

Answer 1

html

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

CSS

img { min-height: 500px; }

注意

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

并记住使用比你的最小高度更大的图像——否则它会很难看。