Как исправить выброс решетки - PullRequest
Новая
       12

Как исправить выброс решетки

0 голосов
/ 01 апреля 2020

Я работал над игрой с памятью, используя HTML, CSS и javascript. Игра работает нормально, но я столкнулся с проблемой в макете. Игра Memory имеет сетку 4 * 4 и в ней скрыты изображения. При щелчке сетки отображается изображение под сеткой. Но когда изображения раскрываются, сетка расширяется, чтобы соответствовать размеру изображения. Я прикрепил изображение моего игрового экрана ниже.

HTML: 

<body>
<div class="topic">
<center>Memory Game</center>

</div>
<br>
<main>
    <button data-turnable="true" data-number="0" id="1">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="2">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="3">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="4">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="5">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="6">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="7">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="8">
        <img src="images/logo.png"alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="9">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="10">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="11">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="12">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="13">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="14">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="15">
        <img src="images/logo.png" alt="card back" />
    </button>
    <button data-turnable="true" data-number="0" id="16">
        <img src="images/logo.png" alt="card back" />
    </button>

    </div>
   </main>
  </body>

CSS: 

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

 }


 body {
 max-height: 100%;
 max-width: 100%;
 background: url(resources/pexels_white_1.jpg) no-repeat center center fixed;
 overflow-y: scroll;
 background-size: cover;
 }


 main {
  width:50vw;
  height:50vh;
  position: relative;
  top: auto;
  left:25%;
  bottom:0;
  display: grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-gap:10px 10px;
  } 
  button {
   background-color: white;
   border: solid black 1px;
 }

 img {
  max-width: 100%;
  pointer-events: none;
  object-fit: cover;
  }

если вы видите изображение ниже, сетка в первом ряду расширяется до размера из-за этого также расширяются изображения портретов и оставшиеся сетки в первом ряду.

Может кто-нибудь помочь мне решить эту проблему if u see the image below

1 Ответ

1 голос
/ 02 апреля 2020

Идея состоит в том, чтобы обмануть элементы в соотношении сторон 1: 1. Единственный чистый CSS способ сделать это - через относительный padding, так как он всегда рассчитывается по ширине элемента.

Добавьте к вашим кнопкам следующий стиль: 

button {
    height: 0;
    padding-bottom: 100%;
}

Также, вам нужно заменить изображения с применением background-image к кнопкам, потому что подгонка изображения в кнопке так, как вам нужно, становится действительно изворотливой.

Мне лично нравится избегать кнопок в таких случаях, как ваш кнопки вызывают многократные проблемы моделирования.

...