Set height based on width

Question

I'm trying to set the li's height based its width. I used JQuery for that.

var width = $('li').width();
$('li').css('height', width + 'px');

The problem is, it's not working. It's not the same exact size.

JSFiddle

$(document).ready(function () {
 "use strict";
 
 var width = $('li').width();
 
 $('li').css({
  'height': width + 'px',
        'background-color': 'green',
 });
    
    $(window).resize(function(){
     $('li').height(width);
 });
});

html, body {margin: 0; height: 100%}

div {
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: auto;
}

ul {
 padding: 0;
 margin: auto;
 width: 70%;
 
 display: inline-flex;
 flex-flow: row wrap;
 justify-content: flex-start;
 align-items: flex-start;
 align-items: center;
 align-content: center;
}

li {
 list-style-type: none;
 border: 1px solid tomato;
 box-sizing: border-box;
 flex-basis: calc(100%/3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <ul>
     <li>1</li>
        <li>2</li>
        <li>3</li>
     <li>4</li>
    </ul>
</div>

Jessica, the snippet works fine for me. Both the JSFiddle and Snippet in your question. — Praveen Kumar Purushothaman, Oct 26 '15 at 22:49
They aren't the exact same size. If you open the dev tools (F12 for Chrome) and look all the way on the bottom of the css, you'll see a graph that shows the sizes, margins etc. If you look at the size, it won't be the same — Jessica, Oct 26 '15 at 22:53
Yes. I think the larger the screen size, the more of a difference there is. (though I could be wrong on that.) — Jessica, Oct 26 '15 at 22:56

Praveen Kumar Purushothaman · Answer 1 · 2015-10-26T23:12:51.637

1

May be, this is a hack, but try this:

$(document).ready(function () {
    "use strict";

    var width = $('li').width();

    $('li').css({
        'height': width,
        'width': width,
        'background-color': 'green'
    });
    $("li").height($("li").width());
    $("li").height($("li").width());

    $(window).resize(function () {
        var width = $('li').width();        
        $('li').css({
            'height': width,
            'width': width,
            'background-color': 'green'
        });
        $("li").height($("li").width());
        $("li").height($("li").width());
    });
});

Fiddle: http://jsfiddle.net/pu5xomhc/1/

edited Oct 26 '15 at 23:12

answered Oct 26 '15 at 23:01

Praveen Kumar Purushothaman

164,888
24
203
252

@Jessica Would you like to remove the `display: flex` and all other `flex` related CSS? – Praveen Kumar Purushothaman Oct 26 '15 at 23:08
I can't remove the flex property's, but lemme try removing the flex-base – Jessica Oct 26 '15 at 23:09
@Jessica I don't know why, but repeating this works. – Praveen Kumar Purushothaman Oct 26 '15 at 23:12
It's still a tiny bit off. I changed `flex-basis` to `width`, and it works as it should now. Do you know why? – Jessica Oct 26 '15 at 23:21

gidim · Accepted Answer · 2015-10-27T01:51:04.513

0

jquery width() rounds the value to an integer. To avoid that i'm using getBoundingClientRect() which support decimals.

Try this:

$(document).ready(function () {
    "use strict";

    var elem = $("li")
    var width = elem[0].getBoundingClientRect().width

    $('li').outerHeight(width);



});

Since you asked to resize when window size changes:

   $(window).resize(function(){
        var elem = $("li")
        var width = elem[0].getBoundingClientRect().width

        $('li').outerHeight(width);
    });

edited Oct 27 '15 at 01:51

answered Oct 26 '15 at 23:13

gidim

2,314
20
23

What's the difference in doing `$('li').outerHeight(width)` and setting it with css? – Jessica Oct 26 '15 at 23:37
outerHeight includes padding and border, height doesn't. the value returned from getBoundingClientRect() includes your border – gidim Oct 26 '15 at 23:45
In css, things are work dynamically. (Like percentage.) Is there a way to do the same thing when editing css through JQuery? Meaning, when the `li's` width changes, is there a way to make the height also change, dynamically? – Jessica Oct 27 '15 at 01:33
yes, i've added an example to the post. Please accept if my answer is correct. – gidim Oct 27 '15 at 01:51
That's only when the actual window resizes, not when the `li`resizes – Jessica Oct 27 '15 at 01:57
that's a new question - see this http://stackoverflow.com/questions/9628450/jquery-how-to-determine-if-a-div-changes-its-height-or-any-css-attribute – gidim Oct 27 '15 at 02:21

Set height based on width

JSFiddle

2 Answers2