CSS: Keeping a div's height relative to its width

<>

This question already has an answer here:

Answers


Is this what you are after? I'm not using -webkit-calc() at all. I've inserted a 1px by 6px image into a outer div which has position: fixed applied to it, and set the image to have a width of 100% and position: relative. Then I have added an inner div which is absolutely positioned to be as high and wide as its ancestor.

Now you can change the width of the outer div, and the images' width: 100% setting will ensure that both the outer and the inner div's are guaranteed to always have a height equal to 1/6th of their width (or at least as close to exactly equal as it can get, the heights will be rounded off to the closest whole number of pixels). Any content could go inside the inner div.

HTML

<div>
  <div></div>
  <img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" />
</div>

CSS

html, body {
  margin: 0px;
  padding: 0px;
}
div {
  position: fixed;
  width: 100%;
}
div > div {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;      
}
img {
  width: 100%;
  display: block;      
  position: relative;
}

Here's a jsFiddle showing the requested behaviour.


You can also use the solution I described in Responsive square columns.

It is based on the fact that % padding-top/bottom and margin-top/bottom are calculated according to the whidth of the parent element.

Adapted to your situation it would look like this :

FIDDLE

HTML :

<div class="wrap">
    <div class="content">
    </div>
</div>

CSS :

.wrap{
    position:fixed;
    width:100%;
    padding-bottom:16.666%; /*  100x1/6 = 16.666...*/
}
.content{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

you can always set div width like this:

$('#div1').css("width", $('#div1').height()/6);

EDIT:

or you could use something like this:

/* Firefox */
width: -moz-calc(100% / 6);
/* WebKit */
width: -webkit-calc(100% / 6);
/* Opera */
width: -o-calc(100% / 6);
/* Standard */
width: calc(100% / 6);

This is only an example-..But it is impossible to get height of a div in a pixels in the css file..you need to use jquery for that

EDIT:

height 1/6 of a width

$('#div1').css("height", window.width()/6);

you could use jquery, e.g.$('.someclass').css('width', 180); $('.someclass').css('height', $('.someclass').width() / 6);

moved the second suggestion from the comment for readability

$('.btnResize').click(function() { $('.div').css('height', $('.div').width()/6);});

Need Your Help

configuring https://yourdomain.com on Google Appengine

java google-app-engine ssl dns subdomain

I recently started using SSL on my appengine app (i.e. uploaded my certs). I got

Can I roll back my Eclipse Juno update?

eclipse install updates eclipse-juno

I don't recall the "install new updates" feature ever offering to perform a major release, certainly not without explaining that it's doing so like just happened with Juno. I unintentionally updat...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.