Question

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

我正在寻找的是做同样的事情，但是用图像。换句话说，在调整浏览器窗口高度的同时保持其比例的图像可以缩放。

有人有什么建议吗？

谢谢！

这是文本的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

如果我正确理解您的问题，您想添加一个基于视口高度缩放的图像。如果是这样，您只想按照与文字类似的方式缩放图片，只需添加一个普通的img标记并使用vh单位，如下所示：

HTML

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

CSS

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

jsfiddle

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

1 个答案: