Bo Mortensen Bo Mortensen - 1 year ago 74
CSS Question

Make responsive images fill div with a percent height

I'm trying to make an "intro"-section for my website which should take up to around 80% of the current (when page is loaded) viewport height and contain two images: one to the left and one to the right of the section. Beneath these two images, a down arrow should be displayed, teasing the client to scroll down for the next section.

Thing is, if I set my intro div to

height: 80%
and set the images
to make them responsive, they overflow the intro div which is set to 80% height.

I made a sample codepen to illustrate my problem.

I set the opacity to 0.5 so you can see where my intro div is.

Is there any way to make the images fit their divs in a way where I don't have to put
on my intro div?

Thanks in advance.

Answer Source

For this scenario, you'll probably want to use background images on divs instead of normal img tags:

<div style="background-image:url(myimage.jpg)"></div>

On these divs, set the following css:


If you have a demo started on or similar, I can help with more specifics.

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