0

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

closed as off-topic by John Conde Dec 14 '15 at 19:19

  • This question does not appear to be about webmastering within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • CSS is not a programming language so you cannot do it that way. – Rob Dec 14 '15 at 14:07
  • At this point, that's not possible with just css. You'll need javascript – Martijn Dec 14 '15 at 14:25
  • This question appears to be off-topic because it is about web development which is off-topic at Pro Webmasters. Web development questions may be asked at Stack Overflow but be sure to read their FAQ before posting to ensure your question meets their guidelines. – John Conde Dec 14 '15 at 17:33
  • This question appears to be off-topic because it is about web development which is off-topic at Pro Webmasters. Web development questions may be asked at Stack Overflow but be sure to read their FAQ before posting to ensure your question meets their guidelines. – John Conde Dec 14 '15 at 19:19
2

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

  • Although this looks like LESS / SASS syntax? – MrWhite Dec 14 '15 at 16:45
  • 1
    @w3d, yes I copied the wrong thing. Updated the answer now. – Stephen Ostermiller Dec 14 '15 at 16:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.