اجعل مربعًا عندما يكون هناك عرض تغيير ديناميكي بناءً على النسبة المئوية [مكررة

Question

هذا السؤال لديه بالفعل إجابة هنا:

• الحفاظ على نسبة العرض إلى الانقسام مع CSS 22 إجابة

أنا أعمل على تطبيق ويب سيقوم بإنشاء شبكة NXN استنادًا إلى اختيار المستخدم لـ N. أريد أن يكون العرض الإجمالي للشبكة نسبيًا (أي 100 ٪ من المساحة المتاحة) حتى يتمكن المستخدمون من طباعة على أحجام الورق المختلفة .

يمكنني بسهولة حساب عرض المربعات في الشبكة بنسبة ٪ (أي: 100 ٪/N) ، لكنني أواجه مشاكل في حساب الارتفاع. سيكون ارتفاع صفحة الويب دائمًا غير محدود إلا إذا كنت أقصرها بشكل مصطنع والتي ، كما قلت ، لا أريد أن أفعل.

كيف يمكنني صنع المربعات في شبكتي تكون مربعة مقابل مستطيلة عندما تكون قيود الارتفاع والعرض لشبكتي ديناميكية وليست مربعة؟

Answer 1

هذا غير اختبار ، لا أعرف كيفية القيام بذلك في CSS فقط ، وأود استخدام jQuery.

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

Answer 2

هناك تقنيتان رئيسيتان للحفاظ على نسبة العرض إلى الارتفاع لعنصر سريع الاستجابة ، باستخدام وحدات الحشو و VW:
(للحصول على حل كامل لشبكة مستجيبة من المربعات ، يمكنك انظر هذا الإجابة)

باستخدام وحدات VW

يمكنك استخدام vw وحدات لجعل عناصرك مربعة وسريعة الاستجابة (وحدات المنفذ على MDN).
1vw = 1% of viewport width حتى تتمكن من ضبط ارتفاع العناصر وفقًا لعرض منفذ العرض.
مثال مع شبكة 4x4:

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>

يمكن تحقيق نفس السلوك في تغيير حجم العنصر الذي يحصل على ارتفاع ميناء العرض usin vh الوحدات.

---

باستخدام الحشو

يتم حساب الحشو وفقًا لعرض الحاويات حتى تتمكن من استخدامه لتعيين ارتفاع الكتلة وفقًا لعرضه.
مثال مع شبكة 4x4:

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

Answer 3

لجعل div مربع سهل جدا مع CSS. لقد حددت عرضًا ، دعنا نقول 50 ٪. ثم تضيف قاعًا من نفس القيمة:

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

وسوف تبقى مربعة كلما قمت بتغيير حجم النافذة.

.

.

يمكنك القيام بذلك مع أي نسبة جانبية تريدها ، إذا كنت تريد أن يكون المربع 16: 9 تحسب:

9/16= 0.56

الذي تتكاثر بعد ذلك بعرض العنصر الخاص بك (في هذه الحالة 50 ٪ (= 0.5)) ، لذلك:

9/16*0.5= 0.28 = 28%

Answer 4

الحل أعلاه لا يحافظ على المنطقة - هذا الحلا

        //@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);
        }