Letakkan blok responsif dalam lajur lentur

Question

Saya mempunyai tapak web permainan yang mempunyai pengepala, papan dan pengaki. Saya memerlukan ketiga-tiganya untuk dimuatkan di dalam port pandangan. Papan harus lebih kecil untuk mencapai ini.

Minifikasi ialah masalah yang saya hadapi. Saya telah mendapat respons lebar tetapi bukan ketinggian yang terhad.

Papan hendaklah kekal segi empat sama dan menempati ruang yang tidak digunakan atau mengecut untuk mengelakkan limpahan.

Saya melakukan sesuatu mengikut garisan di bawah, tetapi papan itu akhirnya melimpahi ketinggian ibu bapa.

Dalam kod sebenar saya, ketinggian tajuk tidak diketahui kerana pembalut baris. Pengaki mempunyai jumlah teks yang berbeza-beza. Di dalam papan catur terdapat satu siri div yang mewakili baris dan satu siri elemen kanak-kanak yang mewakili petak pada papan catur. Segi empat sama mempunyai nisbah bidang

.parent {
  ketinggian: 100vh;
  warna latar belakang: kelabu;
  paparan: flex;
  flex-direction: lajur;
}

.kepala {
  ketinggian: 10px;
  warna latar belakang: biru;
}

.anak {
  warna latar belakang: merah;
  lentur: 1 1 auto;
}

.papan catur {
  lebar: 100%;
  ketinggian maksimum: 100%;
  nisbah aspek: 1/1;
  warna latar belakang: ungu;
  margin: auto;
}

.footer {
  ketinggian: 10px;
  warna latar belakang: hijau;
}

<div class="parent">
  <div class="header">
  </div>
  <div class="child">
    <div class="papan catur">
    </div>
  </div>
  <div class="footer">
  </div>
</div>

Terima kasih atas sebarang bantuan.

Answer 1

Anda telah aspect-ratio memberitahu papan supaya mempunyai ketinggian yang sama dengan lebar, jadi jika lebar anda ialah 3000px, ketinggian anda akan sama. Anda ada pilihan

1. Alih keluar nisbah bidang
2. Dalam contoh saya, keluarkan elemen pembalut kanak-kanak
3. Tetapkan ketinggian maksimum papan catur

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  height: 100vh;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

.header {
  flex-shrink: 0;
  height: 10px;
  background-color: blue;
}

.child {
  flex-grow: 1;
  background-color: lightcoral;
}

.chessboard {
  height: 100%;
  max-height: 100%;
  background-color: purple;
  margin: auto;
}

.footer {
  flex-shrink: 0;
  height: 10px;
  background-color: green;
}

<div class="parent">
  <header class="header">
  </header>

  <div class="child">
    <div class="chessboard">
      main
    </div>
  </div>

  <footer class="footer">
  </footer>
</div>

Answer 2

Jawapan akhir bergantung pada beberapa penjelasan daripada anda. Saya bertanya kepada anda dalam ulasan mengenai soalan ini. Tetapi saya akan memberikan jawapan umum.

Saya akan menerangkan secara ringkas apa yang dilakukan dalam contoh di bawah.
Saya mencipta .chessboard-wrapper ，其中有一个 。 根据需要进行缩放，并具有 aspect-ratio: 1;.
.chessboard 本身具有 position:absolute; Dan akan datang dalam saiz ayah.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  height: 100vh;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

.header {
  height: 10px;
  background-color: blue;
  flex: none;
}

.child {
  background-color: red;
  flex: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chessboard-wrapper {
  position: relative;
  min-height: 0;
  margin: auto;
  aspect-ratio: 1;
}

.chessboard-wrapper > canvas {
  max-width: 100%;
  max-height: 100%;
}

.chessboard {
  position: absolute;
  inset: 0;
  background-color: purple;
}

.footer {
  height: 10px;
  background-color: green;
  flex: none;
}

<div class="parent">
  <div class="header"></div>
  <div class="child">
    <div class="chessboard-wrapper">
      <canvas width="1000000" height="1000000"></canvas>
      <div class="chessboard"></div>
    </div>
  </div>
  <div class="footer"></div>
</div>