制作一个 <div>当宽度根据百分比动态变化时为正方形 [英] Make a <div> square when there is a dynamically changing width based on percentage

问题描述

我正在开发一个网络应用程序，该应用程序将根据用户对 N 的选择生成一个 NxN 网格.我希望网格的总宽度是相对的(即 100% 的可用空间)，以便用户可以打印各种纸张尺寸.

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 sizes.

我可以轻松地按 %(即:100%/N)计算网格中正方形的宽度，但是我在计算高度时遇到了问题.网页的高度总是无限的，除非我人为地限制它，就像我说的，我不想这样做.

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?

推荐答案

这是未经测试的，我不知道如何仅在 CSS 中执行此操作，我会使用 jQuery.

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

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

这篇关于制作一个 <div>当宽度根据百分比动态变化时为正方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！