css - 保持网格内 div 的长宽比

Question

这个问题已经有答案了:

奥 git _a (5 个回答)

已关闭 8 年前。

我正在创建内存游戏。我在 6:4 方面使用 24 张卡，即。 4 行，每行六张卡。

这是我想要实现的目标以及我的屏幕分辨率的图片:

这是不同分辨率下发生的情况的图片

这是我正在使用的CSS代码:

#board{
padding: 5px;
background-color:#cccccc;
width:70%;

#board > div {
        background-color: grey;
        border:#000 1px solid;
        width:71px;
        height:81px;
        float:left;
        margin:20px;
        padding:10px;
        font-size:64px;
        cursor:pointer;
        box-shadow: 0px 5px 14px grey;
        border-radius: 5px;
        transition: 0.2s;
    }

#board > div:hover {
    box-shadow: 0px 0px 25px black;
    transition-timing-function: all ease-in-out;

}

Answer 1

这是一个 4*6 block 的响应式网格，其中

1. 流体宽度/高度
2. 流体边距
3. 固定宽高比

<强> DEMO

HTML:

<div>
    <div class="card"></div>
    <div class="card"></div>
    ...
</div>

CSS:

.card{
    width: 16%;
    padding-bottom:24%;
    margin:0.3%;
    border:1px solid #000;
    background:grey;
    float:left;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    border-radius:10px;
}