CSS: keep the aspect ratio of the image as the viewport width decreases
There are 3 "doorways" on this page :
<div class="textwidget">
<div class="one-third first">
<div id="doorway1" class="doorway">
<h3>The Best Core Exercise Ever</h3>
<div class="doorway-action">
<a href="http://vmpersonal.com/product/core-strength-level-1/"><img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now</a>
</div>
</div>
</div>
<div class="one-third">
<div id="doorway2" class="doorway">
<h3>Core Strength Level 1 Program</h3>
<div class="doorway-action">
<a href="http://vmpersonal.com/product/core-strength-level-1/"><img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now</a>
</div>
</div>
</div>
<div class="one-third">
<div id="doorway3" class="doorway">
<h3>Cardio Program</h3>
<div class="doorway-action">
<a href="http://vmpersonal.com/product/cardio-fitness-level-1/"><img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now</a>
</div>
</div>
</div>
</div>
I would like to make the graphics and divs that contain them responsive.
They are contained in containers div.one-third
.
Images are 409px x 292px, which means the height is the 71.39364303%
width.
I thought that 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 will shrink with div.one-third
as the width of the viewport decreases, but they don't, the images are cropped.
How can I keep the aspect ratio of the images in line with the decrease in the viewport width?
Help rate.
Update : AJ Funk helped me shrink the background images, but how can I make the divs that also contain them scale proportionally?
source to share
You have to combine background-size: contain
with the padding-bottom
CSS trick to keep aspect ratio . It can work like this. Note that the main ideas are elements background-size: contain
and padding-bottom: 71.39364303%
on .doorway
combined with height: 0
. The rest is minimal styling to illustrate this point.
It should be easy to apply in 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">
<a href="#">Watch Video Now</a>
</div>
</div>
</div>
<div class="one-third">
<div id="doorway2" class="doorway">
<h3>Core Strength Level 1 Program</h3>
<div class="doorway-action">
<a href="#">Watch Video Now</a>
</div>
</div>
</div>
<div class="one-third">
<div id="doorway3" class="doorway">
<h3>Cardio Program</h3>
<div class="doorway-action">
<a href="#">Watch Video Now</a>
</div>
</div>
</div>
</div>
source to share
I believe you can use img {max-width:100%}
to make the image more visible. Then, in order to reduce the number of divs, I don't understand why this is necessary. div tags don't serve a purpose in and of themselves and are only important because of the content you insert into it. Links will remain the size of the image, regardless of the size of the image. This is because the link is represented by an image.
But if you display content you need to manipulate, h3, etc. as block elements, which should allow you to dimension with
.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 you are using a percentage is because the expression height: 71%
does not mean height: 71% of width
In fact it means height: 71% of the viewport
either the screen / window size of the device (depending on how the viewport was set) so you can calculate how much of the viewport you want the content took up - 3 images, so roughly 33.33% for all 3 to take the whole screen or you can use different units like pixels, which works less kindly with RWD (Responsive Web Design), but it might work if you use "max" and "min" for the width, and also create other places, for example using percentages wherever they can be used.
I really hope this helped, or at least points to the answers you are looking for.
source to share
You have two options:
This works for responsiveness (you keep the full image, no crop):
img {
max-width: 100%;
height: auto;
}
Works for image backgroud (Image is cropped):
div { background-size: contain; }
Otherwise you might have a look at some jquery plugins that automatically resize the html element based on the window height / width.
source to share