18

How can I set the height of a div to be exactly half whatever the width is, when the width will change depending on the users screen size?

I have the following set on a div...

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:400px;
    background-color:red;  
}

The width works fine on this, it locks at 400 pixels if the screen gets too narrow and it also stops expanding at 1200 pixels if the screen gets too big. But, I also want the height to change to be exactly half of what the width is at any given time. Something like...

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:width/2;
    background-color:red;  
}

That hasn't worked (which I wasn't really expecting it to).

I'd prefer to use CSS if it's possible, but as I'd also like the height to change if the user manually adjusts the size of the internet window too (like what happens with the width at the moment). I'm not sure it's possible with CSS, however, if there's a way to achieve this by Jquery I'd be happy to use that too.

jsFiddle of the above for reference.

Can anyone help me?

Flickdraw
  • 673
  • 7
  • 14
  • 25

3 Answers3

32

If you're ok with supporting only modern browsers, you can do this: http://jsfiddle.net/kNPfh/

The vw measure is in 1/100th of the viewport width, so 50vw is 50% of screen width.

<div class='halfwidth'></div>

.halfwidth {
    width: 100%;
    height: 50vw;
    background-color: #e0e0e0;
}

if not, you can use: http://jsfiddle.net/ff7WC/

$(window).on( 'resize', function () {
    $('.halfwidth').height( $(this).width() / 2 );
}).resize();
Dom Day
  • 2,542
  • 13
  • 12
  • 1
    Made a few edits to this and it works exactly how I wanted it to. http://jsfiddle.net/R5WqL/ Thanks! Out of curiosity, which versions of IE support the first option? – Flickdraw Jul 16 '13 at 09:17
  • np, `vw` is supported in IE v9.0+ ... here's the [support chart](http://caniuse.com/viewport-units) – Dom Day Jul 16 '13 at 09:22
  • @DomDay: could you provide a link to the documentation for this type of values? – Michael Walter Jul 16 '13 at 11:37
  • 2
    @MichaelWalter here is the [w2c link](http://www.w3.org/TR/css3-values/#viewport-relative-lengths) if you want the authoratative definition, and here is the [browser compatability](http://caniuse.com/viewport-units) ... other than that, google is your friend – Dom Day Jul 16 '13 at 11:56
  • thats cool! there is also `hv` for playing with height. Awsome I was for long not dealing with front-end. A lot changed in good direction. I remember times when the only possible way was to write long line ojf java script! – andilabs Jan 31 '14 at 18:08
  • Of course! I knew about vw units, and yet until I hit your answer I lost hours playing with CSS3 calc function :) – ffflabs Sep 14 '14 at 20:39
  • The question doesn't ask for the object height to be half of the window. It asks for the object height to be half of the object width. This solution, by Coincidence, sort of works. Though, only if you're lucky. Your JQuery's `$(this)` is a reference to the context of "window". So this is very wrong. – Suamere Jul 16 '18 at 23:27
3

You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.

CSS:

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

For details, see this article on the subject http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

You can also use jquery for that, something like:

$('.ss').css('height',width()/2);

Please choose this as the correct answer if it solves your doubt by clicking on the tick symbol to the left.

damien hawks
  • 512
  • 3
  • 17
3

Make sure you have a js file then use this

$(window).load(function(){
    $('.element').height($('.element').width() / 2);
    $(window).resize(function(){
        $('.element').height($('.element').width() / 2);
    });
});

http://jsfiddle.net/Hive7/8CNtU/2/