根据宽度设置高度

Question

我正在尝试根据li's设置width高度。我使用了JQuery。

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

问题是，它不起作用。它的大小不一样精确。

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>

Answer 1

可能是，这是一个黑客，但试试这个：

$(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());
    });
});

小提琴：http://jsfiddle.net/pu5xomhc/1/

Answer 2

jquery width（）将值舍入为整数。为了避免我使用 getBoundingClientRect（），它支持小数。

试试这个：

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

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

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



});

由于您要求在窗口大小更改时调整大小：

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

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