如何解决网格爆裂

Question

我一直在使用HTML，CSS和javascript进行记忆游戏。游戏工作正常，但我在布局上遇到问题。记忆游戏具有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;
  }

如果U看到下面的图像，则第一行中的网格将扩展为人像图像的大小，因此，第一行中的其余网格也会被扩展。

[有人可以帮我解决这个问题吗？

Answer 1

想法是将元素欺骗为1：1的纵横比。唯一的纯CSS方法是通过相对padding，因为它始终是根据元素的宽度来计算的。

向按钮添加以下样式：

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

此外，您还需要在按钮上应用background-image来替换图像，因为按照您所需的方式在按钮中放置图像确实很古怪。

我个人喜欢避免在像您这样的情况下使用按钮，因为按钮会导致多种样式问题。

如何解决网格爆裂

问题描述投票：0回答：1

1个回答

最新问题

如何解决网格爆裂

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1