css - 100% 宽度图像，与 min-height 保持比例

Question

我希望图像是 100% 但有一个 min-height当图像达到这个高度时为 500px 我希望比例保持(基本上)关闭 100% 宽度。我知道这可以用 javascript 实现，但我从未见过用 css 完成的。是否可以？

Answer 1

html

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

CSS

img { min-height: 500px; }

通知

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

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