html - 垂直响应设计 : Scaling an image proportionally in div

Question

我发现这个网站非常有用 Vertically Responsive Design : Keeping Things Above The Fold其中展示了如何创建在调整浏览器窗口高度(而非宽度)时缩放其中文本的 div。

我正在寻找的是做完全相同的事情，但使用图像。换句话说，图像在调整浏览器窗口高度时会按比例放大和缩小，同时保持其比例。

有人有什么建议吗？

谢谢!

更新: fiddle 在这里:https://jsfiddle.net/1pu67mLg/

这是文本的 HTML(来自 nitinh.com):

<div class="container">
        <div class="hero-unit">
            <div class="text">
                <h1>lorem ipsum dolor sit amet</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis euismod felis. Phasellus id pretium dui proin finibus.
                </p>
                <p>
                    Lorem ipsum dolor sit amet <a href="#">article</a>.
                </p>
            </div>
       </div>
</div>

和 CSS(来自 nitinh.com):

.container{
    min-width:600px;
    max-width:1080px;
    min-height:100%;
    width:150vh;
    margin:0 auto;
    font-family:'Lato',sans-serif
}

.hero-unit{
    min-width:600px;
    max-width:1080px;
    min-height:calc(690px * (90/150));
    height:90vh;
    width:150vh;
    background-color:#2fa1b2;
    position:relative;
    box-sizing:border-box;
    padding:10px 30px
}   

.hero-unit h1{
    font-weight:400px;
    font-size:7vh
}

.hero-unit .text{
    font-weight:100;
    font-size:4vh;
    color:#fff
}

Answer 1

如果我正确理解您的问题，您想要添加一个根据视口(viewport)高度缩放的图像。如果是这样，您只想像缩放文本一样缩放图像，只需添加一个普通的 img 标签并使用 vh 单位，如下所示:

HTML

<img src="http://placehold.it/350x150" alt="">

CSS

.hero-unit img{
  height: 40vh;
  width: auto;
}

jsfiddle