GetGalax GetGalax -4 years ago 96
CSS Question

Vertically Responsive Design: Scaling an image proportionally in div

I found this very useful site Vertically Responsive Design : Keeping Things Above The Fold where its shown how to create div that scales text within it when adjusting the browser window height (not width).

What i'm searching for is to do the exact same thing but with an image. In other words an image that scales in and out when adjusting the browser window height while keeping it's proportions.

Anyone have any suggestions?

Thanks!

UPDATED: Fiddle here: https://jsfiddle.net/1pu67mLg/

This is the HTML for the text (from 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>


And the CSS (from 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 Source

If I understand your question correctly, you want to add an image that scales based on the height of the view-port. If so you just want to scale the image similarly to your text just add a normal img tag and use vh units like so:

HTML

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

CSS

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

jsfiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download