Set height to be equal width minus some value - css

Question

<div>
<div class="row">
<div class="col-md-4">
<div class="cta-item cta-1">
<a href="#">
<div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
<p class="cta-title">Visit</p>
</a>
</div>
</div>
<div class="col-md-4">
<div class="cta-item cta-2">
<a href="#">
<div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
<p class="cta-title">Shop</p>
</a>
</div>
</div>
<div class="col-md-4">
<div class="cta-item cta-3">
<a href="#">
<div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
<p class="cta-title">Eat</p>
</a>
</div>
</div>
</div>
</div>
<script>
$(document).ready(cta);
$(window).resize(cta);
function cta() {
var ctaWidth = $('.cta-item').width();
var newHeight = ctaWidth - 40;
$('.cta-item').css( 'height', newHeight );
}
</script>
My question is how to do height = width - 40px for particular element by pure css?
Thanks.

Answer 1

If you need CSS to work in older browsers, too, there is a way utilizing the fact, that vertical padding is always calculated in relation to the parent element’s width. So you can do like this to enforce the height:
// additional styles when Bootstrap css is loaded
.cta-item {
position: relative;
background-color: #ffcccc;
*zoom: 1;
}
.cta-item::before {
width: 0;
float: left;
display: block;
content: ' ';
padding-bottom: 100%; /* makes height match width */
margin-top: -40px; /* value substracted from height */
}
// clearfix
.cta-item::after {
content: ' ';
display: table;
clear: both;
}
Working example: https://jsfiddle.net/7m5vyaqs/1/
It works like a min-height. If you want it to be a max-height, you have to wrap the .cta-item’s contents into a container and position it absolute. Like:
.cta-item > *:first-child {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}