Html 垂直响应设计：在div中按比例缩放图像

我发现这是一个非常有用的网站，它展示了如何创建div，在调整浏览器窗口高度（而不是宽度）时缩放其中的文本

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

有人有什么建议吗

谢谢

更新：小提琴在这里：

这是文本的HTML（来自nithinh.com）：

---

如果我正确理解了您的问题，您希望添加一个基于视口高度缩放的图像。如果是这样的话，您只需添加一个普通的img标签，并使用

vh

这样的单位来缩放图像：

HTML

---

你的小提琴没有图像？没有，因为我不知道如何在容器中添加图像，并具有文本现在所具有的缩放效果？安德鲁，你的真命天子！非常感谢您的支持。你让它看起来很简单；）

<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>

.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
}

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

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