html - 使用 CSS 缩放 img

Question

我正在尝试使用 CSS 进行特定缩放。下面是我所追求的图像。图片距离浏览器页面顶部 300 像素。以上为静态测试。
我希望文本下方的图像随浏览器按比例缩放。保持所有图像完好无损，不要切断底部或必须滚动图像底部。

下图是浏览器窗口的示意图。浏览器还有一个全屏选项，因此它应该能够缩放。

我已经尝试在 img 标签上使用 width 100% 和 height auto 但这并不是我想要的。

下面的代码可以正常工作，但是当我向下移动图像以为顶部文本让路时，图像底部会被截断。我需要它来扩展到浏览器底部。

#photo-container{
    margin-top: 200px;

    img{
        min-height: 720px;
    max-height: 100%;
    height: 100%;
    width: auto;
    }
}

如果不能使用 CSS，是否有 js 选项？

Answer 1

对于遇到同样问题的任何人，这里是我如何解决它的。不确定我是否可以仅使用 CSS 来完成。

HTML

    <div id="photo-container">
        <img src="img/bla.jpg"/>
    </div>

CSS

#photo-container{
    position:relative;
    top: 200px;
    overflow: hidden;
    text-align: center;

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

JS

$(document).ready(function(){
    var photoContainer = $('#photo-container');
    var top = photoContainer.position().top;

    $(window).on('resize', function(){
        var browserH = $( window ).height();
        photoContainer.height(browserH - top);
    });

    $(window).trigger('resize');

});