Question

我想使用flexbox创建一张翻盖卡，前面有一个图像（使用<picture>元素），后面站点上有一些信息。

图像可以具有不同的宽高比，但应始终为中心。我通过使用实现这一点（实际上，sizes属性决定了元素的宽度）：

<div style="display:flex;flex-direction:column;align-items: center;justify-content: center;border:red solid 2px;height:100%">
            <picture>
                <img src="data/IMGP7206_sized.jpg"
                     srcset="data/IMGP7206_sized.jpg 4189w" alt="photo"
                     sizes="60vw">
            </picture>
 </div>

卡的背面应与正面相同，正面由图像尺寸定义。当前的flipcards的CSS实现为容器分配固定的宽度/高度。我想最终得到这样的东西：

 <div style="display:flex;flex-direction:column;align-items: center;justify-content: center;border:red solid 2px;height:100%">
    <div class="flip-container">
        <div class="flipper">
            <div class="front">
                <picture>
                    <img src="data/IMGP7206_sized.jpg"
                         srcset="data/IMGP7206_sized.jpg 4189w" alt="photo"
                         sizes="60vw">
                </picture>
            </div>
            <div class="back">
                SAME SIZE AND POSITION AS IMAGE
            </div>
        </div>
    </div>

</div>

Flipcard结构取自David's page。

是否有可能仅使用CSS完成此操作？

没有指定高度的CSS翻转卡（使用flexbox）

0 个答案: