CSS: keep image aspect ratio as viewport width decreases - css

Question

At this page, there are 3 "doorway" graphics:
<div class="textwidget">
<div class="one-third first">
<div id="doorway1" class="doorway">
<h3>The Best Core Exercise Ever</h3>
<div class="doorway-action">
<img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now
</div>
</div>
</div>
<div class="one-third">
<div id="doorway2" class="doorway">
<h3>Core Strength Level 1 Program</h3>
<div class="doorway-action">
<img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now
</div>
</div>
</div>
<div class="one-third">
<div id="doorway3" class="doorway">
<h3>Cardio Program</h3>
<div class="doorway-action">
<img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now
</div>
</div>
</div>
</div>
I'd like to make the graphics and the divs that contain them responsive.
They are contained in div.one-third containers.
The images are 409px x 292px, meaning the height is 71.39364303% of the width.
I thought if I used CSS:
#doorway1 {background-image: url('images/doorway1.png'); height: 71.39364303%;}
#doorway2 {background-image: url('images/doorway2.png'); height: 71.39364303%;}
#doorway3 {background-image: url('images/doorway3.png'); height: 71.39364303%;}
they would scale down with the div.one-third as the viewport decreased in width, but they don't, the images are cut off.
How can I keep the images aspect ration consistent as the viewport width decreases?
Help appreciated.
Update: AJ Funk has helped me make the background images scale down, but how do I make the divs that contain them scale down proportionally too?

Answer 1

You should combine the background-size: contain with a padding-bottom CSS trick to maintain aspect ratio. This could work as follows. Note that the main ideas are the background-size: contain and padding-bottom: 71.39364303% on .doorway elements, in combination with height: 0. The rest is minimal styling to illustrate the point.
It should be straightforward to apply this on your linked test page.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.textwidget {
width: 100%:
font-size: 0; /* to prevent space between inline-block doorways */
}
.one-third {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 30%;
padding: 20px;
}
.doorway {
box-sizing: border-box;
width: 100%;
height: 0;
padding-bottom: 71.39364303%;
background-image: url('https://placehold.it/409x292');
background-size: contain;
border: 1px solid #000;
font-size: 1rem; /* reset font-size */
}
<div class="textwidget">
<div class="one-third">
<div id="doorway1" class="doorway">
<h3>The Best Core Exercise Ever</h3>
<div class="doorway-action">
Watch Video Now
</div>
</div>
</div>
<div class="one-third">
<div id="doorway2" class="doorway">
<h3>Core Strength Level 1 Program</h3>
<div class="doorway-action">
Watch Video Now
</div>
</div>
</div>
<div class="one-third">
<div id="doorway3" class="doorway">
<h3>Cardio Program</h3>
<div class="doorway-action">
Watch Video Now
</div>
</div>
</div>
</div>

Answer 2

You need to set the background-size to contain
#doorway1,
#doorway2,
#doorway3 {
background-size: contain;
}

Answer 3

I believe that you can use img {max-width:100%} to make the images scale down responsively. Then as for scaling down the divs, I cannot see why it would be necessary. div tags don't serve a purpose on their own, and are only important because of the content you put inside of it. The links will remain the size of the image, no matter what size the image is. This is because the link is represented by the image.
But, if you displayed the content you need to manipulate, h3, etc. as block elements, which should allow you to set the dimensions using
.doorway h3{ //h3 is a child element of the class doorway
display: block;//Or "inline-block", if you are using inline currently
//Then you should be able to set the max-width or max-height whatever the case may be
max-height: xx%;
}
The reason that using the percentage value you wer using is because saying height: 71% does not mean height: 71% of width It actually means height: 71% of the viewport or the size of the device screen / window (depending on the way you set the viewport) so you could calculate what the amount of viewport you want the content to take up is, 3 images so roughly 33.33% for all 3 to take up all of the screen or you can use different units like pixels, which works less kindly with RWD (Responsive Web Design) but it can work if you use 'max' and 'min' for the width, as well as make some other accommodations, such as using percentages everywhere where it can be used.
I truly hope this helped or at least points you toward the answers you are looking for.

Answer 4

You have two choices :
This working for responsive (You keep the full image, no crop) :
img {
max-width: 100%;
height: auto;
}
This working for backgroud image (The image will crop) :
div { background-size: contain; }
Else you can have a look to some jquery plugins that auto resize an html element depending the window height/width.