How to adjust div height automatically along the div width according to resiging of browser

Question

I'm working to make a website responsive. I've used auto height for all the div. But, for a specific div, I've to use fixed height for all the size of a browser. But, instead of using putting the height manually at media query for every size's device/browser, I want to do it automatically/dynamic. May be javascript/jQuery can do it. But, I haven't so much knowledge about javascript/jQuery. So, I want your help. My container div's max-width: 1280px; I've a child div named "#artwork" which initial dimension is: 1065*695px. Taking base as container div's max-width and #artwork div's initial height, I want to give automatic height to #artwork for every resizing of browser.

I can't give "#artwork" height: auto, because there are lots of big image at that "#artwork" div. But, by javascript, only one image has shown normally and by scrolling down, people can able to see the next image one by one. If I give height: auto or use minimum-height to "#artwork", all the images are shown. I've already put "artwork" div height manually at different type of css file by media query. But, I want to do it automatically, so the ratio is perfect for every size of browser at every device.

Here is the examples of pages:
[dead links removed]

#container {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0;
   overflow: hidden;
   font-family: GandhiSansBold;
   position: relative;
}

#artwork {
   /*width: 1065px;*/
   width: 83.203%;
   height: 695px;
   margin: 0;
   float: left;
   overflow: hidden;
   margin-bottom: 10px;
}

Please, be assure that, if the browser size is so big, the #artwork height can't cross the height:695px at any case by automatic resizing.

So, where is the question? Do you need #artwork element's height/width when browser resizes? — Ikrom, Apr 16 '13 at 20:04
Yes, the width is already defined according to the the resizing of browser as I used percentage as a width. Now just I need the height when I re-size the browser. But, the height can't cross the height: 695px at any case. — user1896653, Apr 16 '13 at 20:30
See my answer below, you can get resized width/height of browser. You need to add **max-height:695px** to `#artwork`. — Ikrom, Apr 16 '13 at 20:39
possible duplicate of [CSS maintain div aspect ratio](http://stackoverflow.com/questions/1495407/css-maintain-div-aspect-ratio) — web-tiki, Apr 27 '15 at 19:20

score 0 · Answer 1 · answered Apr 16 '13 at 20:03

0

http://f6design.com/journal/2011/10/18/responsive-elements-that-retain-their-aspect-ratio/

The problem boils down to maintaining your aspect ratio in a fluid design. This path has been well travelled and there exists many pretty solutions. I am listing one above. Let me know if it solves your problem for nested div elements as well.

answered Apr 16 '13 at 20:03

banjoSas

184
1
10

This isn't work for me if I use #artwork { /*width: 1065px;*/ width: 83.203%; height: 0; margin: 0; float: left; overflow: hidden; margin-bottom: 10px; padding-bottom: 50%; } – user1896653 Apr 16 '13 at 20:21

Ikrom · Answer 2 · 2013-04-16T21:07:37.893

You need to count new height of browser when it resizes, then set new height to image:

var TO = false;
var resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize';
$(window).bind(resizeEvent, function() {
  TO && clearTimeout(TO);
  TO = setTimeout(resizeImage, 200);
});
function resizeImage(){
  // browser resized, we count new width/height of browser after resizing
  var height = window.innerHeight || $(window).height();
  // var width = window.innerWidth || $(window).width();
  // you need to change here #artwork height
  var imgHeightInPercent = 30; // browser height is 100%
  var desiredHeight = (height * imgHeightInPercent) / 100;
  // finally we changed #artwork height
  $('#artwork').height(desiredHeight); 
}

Actually, I've very little knowledge on javascript/jQuery. At your link, sample code are given. I can't understand how can I implement. Also, I don't need it for all div's. I've done for all div's by defining height: auto and width: %; I just need for #artwork div's height. Can you please, give me the code only for #artwork div's resizing height? — user1896653, Apr 16 '13 at 20:44

jherax · Answer 3 · 2015-04-02T03:47:18.867

The best way is work with CSS and percent values, but for now we are going to use jQuery.

This is a sample using jQuery and handling the resize event:

(function() {
    var _viewport = $(window),
        _event = 'onorientationchange' in window ? 'orientationchange' : 'resize';

    //add a namespace to event
    _event += ".boxsize";

    //creates the event handler by namespace
    _viewport
        .off(_event)
        .on(_event, fnResizer);

    function fnResizer (e) {
        var gap = 40,
            winWidth = _viewport.width(),
            winHeight = _viewport.height(),
            //add your calculations
            boxWidth = winWidth - gap,
            boxHeight = winHeight - gap;
        //sets the new size of the boxes
        $('#artwork, #container').css({
            "width": boxWidth,
            "height": boxHeight
        });
    }
}());

HTML:

<div id="container">
    <div id="artwork"></div>
</div>

Actually, I've very little knowledge on javascript/jQuery. At your code, sample code are given. I can't understand how can I implement. Also, I don't need it for all div's. I've done for all div's by defining height: auto and width: %; I just need for #artwork div's height. Can you please, give me the code only for #artwork div's resizing height? — user1896653, Apr 16 '13 at 21:13
`$(window).resize(function() { var yourComputedHeight = 100; $('#artwork').height(yourComputedHeight); });` — jherax, Jun 17 '13 at 21:51

How to adjust div height automatically along the div width according to resiging of browser

3 Answers3