: How to calculate in CSS? I want to make CSS like this Width : 80%; Height : (width-30%); but I do not know, in order to measure height: width-30%. I've been using calc() but still can not

@Heady270

You appear to be looking for a fixed aspect ratio box. That is possible in CSS, but not with calculations. Instead you have to use some trickery. Padding in CSS is always based on the width of the box. You can use bottom padding on a pseudo element to force the height to be 30% less than the width.

.mybox {
width: 80%;
}
.mybox:before {
content: "";
float: left;
padding-bottom: 70%;
}
.mybox:after {
content: "";
display: table;
clear: both;
}


Adapted from Tomas Mulder's anwer to Responsively change div size keeping aspect ratio

Vote Up Vote Down