开发者

Make a <div> square when there is a dynamically changing width based on percentage [duplicate]

This question already has answers here: Maintain the aspect ratio of a div with CSS (37 answers) Closed 7 years ago.

I am working on a web app that will generate an NxN grid based on the user's selection of N. I want the total width of the grid to be relative (ie 100% of the available space) so that users can print on various paper 开发者_StackOverflow社区sizes.

I can easily calculate the width of the squares in the grid by % (ie: 100%/N), but I am having issues calculating the height. The height of a web page is always going to be infinite unless I artificially limit it which, like I said, I don't want to do.

How can I make the squares in my grid be square versus rectangular when the height and width constraints of my grid are dynamic and not square?


There are 2 main techniques to keep the aspect ratio of a responsive element, using padding and vw units :
(for a complete solution for a responsive grid of squares, you can see this answer)

Using vw units

You can use vw units to make your elements square and responsive (viewport units on MDN).
1vw = 1% of viewport width so you can set the height of the elements according to the width of the viewport (or height with vh units).
Example with a 4x4 grid :

body{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

div{
    width:23vw; height:23vw;
    margin:1vw 0;
    background:gold;  
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

The same behaviour can be achieved sizing the element accoring to the viewport height usin vh units.


Using padding

Padding is calculated according to the containers width so you can use it to set the height of block according to it's width.
Example with a 4x4 grid :

.wrap {
    width:80%;
    margin:0 auto;
}
.wrap div {
    width:23%;
    padding-bottom:23%;
    margin:1%;
    float:left;
    background:gold;
}
<div class="wrap">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>


To make a div a square is pretty easy with CSS. You set a width, let's say 50%. Then you add a padding-bottom of the same value:

div {
width: 50%;
padding-bottom: 50%;
}

and it will stay square whenever you resize the window.

.

.

You can do this with any side ratio you want, if you want the box to be 16:9 you calculate:

9/16= 0.56

which you then multiply by the width of your element (in this case 50%(=0.5)), so:

9/16*0.5= 0.28 = 28%


This is un-tested, I do not know of how to do this in CSS only, I would use jQuery.

$('div').height($('div').width());


The above solution doesn't preserve area - this one is better

        //@param {jQuery} div 
        function makeSquare(div){
            //make it square !
            var oldDimens = {
                h : div.height(),
                w : div.width()
            };
            var area = oldDimens.h * oldDimens.w;
            var l = Math.sqrt(area);
            div.height(l).width(l);
        }
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜