Chris, if you are still having a problem understanding coothead’s post #5 example and subsequent explanations, I have taken the liberty of modifying his example slightly for the purpose of clarifying the math.
Instead of demonstrating the efficient use of one box does all, I have created a second box.
An outer container, .wrapper, is used to set the width of the inner image box, and thus the display.
The width of that inner box is therefore 100% by default. It doesn’t really have to be mentioned in the CSS.
The height of the inner box is determined by a percent padding-top setting because vertical padding is computed based on the width of the parent container… my reason for using a .wrapper as a parent container is simply that the padding-top in percent is very easy to calculate based on a width of 100% and the width of the display can be changed independently from the width of the page without needed to recalculate the percent padding top.
To use this example,
(1) open it in your browser and see a red dashed line near the top of the page.
(2) change the width of the browser window and see the width of the red line remain 60% of the width of the page.
(3) delete the commented line to reveal the inner box as remarked.
(4) experiment with any values that you wish to see how that inner box is affected.
(5) delete the next commented line as remarked to add the background-image and gradients. (don’t overlook deleting the closing comment mark just above the last curly brade).
Hope this helps If it doesn’t, then we will need to see more of the context surrounding your image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>constant aspect ratio container</title>
<!--
https://www.sitepoint.com/community/t/2-layer-method-for-image-overlays-for-translucent-coloring/235774/5
Chris77
code by coothead + ron
-->
<style media="screen">
.wrapper {
width:60%; /* This determines the width of the image box. */
margin:0 auto; /* This centers the image box on the page. Optional. */
outline:1px dashed red; /* Temporary Outline for testing purposes. To Be Deleted. */
}
/* delete this line including the open comment mark after expeimenting with the .wrapper box and its red dashed line. Deleting this line will reveal the inner box.
.element-with-background-image {
width:100%; /* This container will be the same width as the .wrapper container */
padding-top:75%; /* padding-top gives this inner box a responsive height. Vertical padding is computed based on the width of the containing element, .wrapper in this case. A percent value creates a box with a constant aspect ratio. 75% = 4:3 */
/* above, we created an inner box with a predictable aspect ratio. Experiment with browser width and percent height as desired to see how the height of the box is affected. Delete this line and the closing comment mark above the closing brace when ready to add the background image, slider, or vid :eek: with the 4:3 aspect ratio.
background:linear-gradient(rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.6)),
url(https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg); /* 2304x1728 original image dimensions from which the 4:3 aspect ratio is determined */
background-size:100% auto;
*/
}
</style>
</head>
<body>
<div class="wrapper">
<div class="element-with-background-image"></div>
</div>
</body>
</html>
