Can I set the height of a div based on a percentage-based width?
This can be done with a CSS hack (see the other answers), but it can also be done very easily with JavaScript.
Set the div's width to (for example) 50%, use JavaScript to check its width, and then set the height accordingly. Here's a code example using jQuery:
$(function() { var div = $('#dynamicheight'); var width = div.width(); div.css('height', width);});
#dynamicheight{ width: 50%; /* Just for looks: */ background-color: cornflowerblue; margin: 25px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dynamicheight"></div>
Can I program the div height to be a certain percentage of it's current width?
There's the padding
trick, already answered, but I use another approach, envolving two nested divs.
The parent one, I set the width. The child one, I use the height
value as a container unit vw
- (means viewport width).
It works well, see here (resize the viewport)
<div>
<div></div>
</div>
CSS:
div {
width: 100%;
}
div > div {
background: silver;
height: 10vw;
}
Setting div height based on its width
HTML:
<div class='box'>
<div class='content'>All your content are belong to us</div>
</div>
We use two block elements to achieve the desired behaviour, box for width, content for height.
CSS:
.box{
position: relative;
width: 50%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /*What you want the height to be in relation to the width*/
}
The Content:
Then set the content to cover the entire box absolutely so no matter the size, it fits!
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Tada you are done...
SOURCE: Pure CSS
Set height to percent of width?
It can be done CSS only:
#sheet {
position: relative;
padding-top: 50%; /* Your percentage */
}
#sheet > img {
position: absolute;
height: 100%;
left: 0;
top: 0;
}
DEMO
It works because if you use a percentage in padding-top
, it is relative to width. Then, you can use padding instead of height, using position: absolute
to children in order to have a 0px tall parent.
How to set div height as percentage of CSS width in jQuery?
You can change your code to this:
var c1 = $('#gifcon').width() * .35;
$('#gifcon').css({
'height': c1 + 'px'
});
Related Topics
CSS Specificity or Inheritance
Using a Custom (Ttf) Font in CSS
Is Vertical Text-Overflow Possible with CSS3
How to Style Disabled Textarea in IE8
Transform-Origin for CSS Animation on Svg Working in Chrome, Not Ff
Make Column and Main Content Stay on Left or Right, as Browser Is Resized
CSS Vertical Scrollbar Padding Left/Right in Ul Possible
CSS Selector for Selecting an Element That Comes Before Another Element
How to Make Circular Background Using CSS
Pass Function or Mixin by Reference in SASS
How to Center Multiple Inline-Block Elements with CSS
How to Add a Custom Font to Rails App
Getting Columns to Wrap in CSS Grid
Why Are Certain CSS Properties Not Applied to A:Visited
How to Target a Specific Group of Siblings in a Flat Hierarchy