Question

我正在尝试在CSS网格中创建翻转卡。不幸的是，背景图片的行为与我期望的有所不同。该图像应延伸到卡的大小。始终保持相同的宽高比。

请在小提琴上查看我的示例：https://jsfiddle.net/x4ymfor6/

<div class="grid">
    <div class="card">
        <div class="card-inner">
            <div class="front"><div class="placeholder">front</div></div>
            <div class="back">back</div>
        </div>
    </div>
</div>

    .card {
        background-color: transparent;
        max-width: 100%;
        max-height: 100%;
        perspective: 1000px;
    }

    .card-inner {
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }

    .card:hover .card-inner {
        transform: rotateY(180deg);
    }

    .front, .back {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
    }

    .front {
        background-color: #bbb;
        color: black;
    }

    .back {
        background-color: dodgerblue;
        color: white;
        transform: rotateY(180deg);
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1em;
        grid-auto-rows: minmax(170px, auto);
        margin: 5em;
    }

    .grid > div {
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 90%;
    }

    .grid > div {
        background-color: #221e1e;
        border-radius: 3px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.99);
    }

    .card-image {
        max-width: 100%;
        max-height: 100%;
    }

    .placeholder {
        background-image: url(https://svgshare.com/i/EMw.svg);
        max-width: 100%;
        max-height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }

Answer 1

您可以使用background-size属性并将其设置为contain。

喜欢这个：

    .placeholder {
        background-image: url(https://svgshare.com/i/EMw.svg);
        background-size: contain;
        max-width: 100%;
        max-height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }

如何在网格上的翻转卡片中拉伸图像

1 个答案: