使用CSS扩展img

Question

我正在尝试使用css进行特定缩放。 下面是我所追求的图像。图像将从浏览器页面顶部300px。 上面是静态测试 我希望文本下方的图像与浏览器成比例缩放。保持所有图像完整，不切断底部或必须滚动图像的底部。

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

我已尝试在img标签上使用宽度100％和高度自动，但这并不是我所追求的。

下面的代码类型的工作，但是当我向下移动图像让位于顶部文本时，图像的底部被切断。我需要它扩展到浏览器底部。

#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');

});

Answer 2

按比例缩放

background-image: url(oneimage.jpg);
/*background-attachment: fixed;*/
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;