1

Using CSS I would like to restrict 1 dimension to never exceed a factor of the other.

For example this pseudocode:

max-height: (width * 0.75)px;

Would ensure that the height of the element never exceeds 75% of it's width, but it may be smaller.

Is something like this possible, or am I out of luck?

Edit: Please note that I'm not looking to make the height exactly 75% of the width, but rather I am looking to make sure it doesn't exceed 75%

Evert
  • 93,428
  • 18
  • 118
  • 189
  • Possible duplicate of [Maintain the aspect ratio of a div with CSS](http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – NovaLogic Jan 20 '16 at 19:41
  • This is called the aspect ratio fyi – zgood Jan 20 '16 at 19:43
  • 1
    The question doesn't seem to be a matter of preserving aspect ratio, but not to exceed some aspect ratio, that is different. – Alvaro Montoro Jan 20 '16 at 19:52

4 Answers4

2

If the element takes the entire viewport width. You can do something like:

.class {
  max-height: 75vw;
}
Stickers
  • 75,527
  • 23
  • 147
  • 186
  • I guess that always refers to the entire viewport, and not the parent element? Clever though, I might still be able to use that and might solve my problem if there's not a better solution. – Evert Jan 20 '16 at 20:06
  • You are right. Or if the element is using vw too, or % relative to the viewport, you'll then have to do a calc() or set the max height manually. – Stickers Jan 20 '16 at 22:07
1

You can't set the ratio, but there's always padding-bottom!

div {
  width: 100%;
  padding-bottom: 75%;
}

This code will set div to 4:3 ratio

For 16:9 ratio use padding-bottom: 56.25%

An edit after re-read

What if I suggest using a div inside a div?

<div class="a">
  <div class="b">

  </div>
</div>
<style>
.a{
  width:100%;
  padding-bottom: 75%;
  background-color: red;
  position: relative;
}
.b{
  width: 100%;
  max-height: 100%;
  background-color: white;
  position: absolute;
  overflow: hidden;
}
</style>

Put the content inside div.b and it will never exceed the 75%

Kevin Kopf
  • 13,327
  • 14
  • 49
  • 66
  • @AlvaroMontoro that's correct. I actually intend to restrict the aspect ratio for both dimensions. Ultimately I want my div to take up 4:3 or 16:9 but not let the aspect ratio diverge further than those two. Those are my ultimate relative bounding boxes. – Evert Jan 20 '16 at 20:03
  • @Nordenheim I do appreciate, you still didn't read the other comment or my original post well. I'm looking to control `max-height`, your solution would be correct if I was just looking for `height`. – Evert Jan 20 '16 at 20:06
  • Thanks that might work! I tried to wrap my head around it, but I guess this would even work if the parent `width` is not 100%, which is ultimately the goal. Thank you! – Evert Jan 20 '16 at 20:29
0

CSS does not allow setting a property based on other's value, you would need to use another approach, such as javascript, for this.

Here's a jQuery example:

var $elem = $('#elem');
$elem.css('max-height', $elem.width() * 0.75 );
Chris Jaquez
  • 649
  • 1
  • 6
  • 16
  • It's a valid solution, but would be a lot worse to do it this way. It means I have to listen for resize events as well to make sure it stays accurate, and whenever the DOM reflows (it's a fairly dynamic application). Still a good answer for cases where it's not a concern. – Evert Jan 20 '16 at 20:10
0

Check out this question: Height equal to dynamic width (CSS fluid layout)

Specifically @Kristijan's answer. You will need to adjust the bottom padding. 

.some_element {
  position: relative;
  width: 20%;
  height: 0;
  padding-bottom: 20%;
}
Community
  • 1
  • 1
EricBellDesigns
  • 955
  • 1
  • 9
  • 33
  • This doesn't answer the question. I'm looking to use it as a `max-height` not `height`. If it was `height`, you would be right though. – Evert Jan 20 '16 at 20:04