如何将图像和文本放置为相同大小？

如何解决如何将图像和文本放置为相同大小？

我尝试制作卡片翻转动画当然可以了〜
第一类用作图像，背景大小相同 我从w3schools.com

了解了这种效果/动画

但是..在这样的其他班级中，我有点无法控制，我真的找不到第一班和第三班之间的区别。

     /* This container is needed to position the front and back side */
        .yoink3 {
            position: relative;
            width: 300px;
            height: 200px;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
            background: url("https://lh3.googleusercontent.com/proxy/z78bjcT-OIUdZ6Ae99jo_cWAaXnFk2HNQAP0qhCJ5eOzkw9JnF5cjId4DQjRAK6Hy_8sLheANHKNq-C97nxyR0_1jEF_zZTRLJ3C-7W32Vxsq2s1SzjWJLo_TBXDhJvOHa4VNtbomSe563bhgQ");
            background-size: cover;
               border-radius: 30px;
               float: right;
    
    }

这是html格式〜

    <!--First Image-->
            <div class="pic1">
                <div class="yoink">
                    <div class="Work">
                    <a href="Pic1.jpg" target="_blank">
                    <img src="Pic1.jpg" alt="WoRk" height="300" width="300" style="border-radius: 30px;">
                    </a>
                    </div>
                    <div class="desc1">
                    <p>As we can all see in this image,<br>
                    She is working at her home</p>
                    </div>
                </div>
            </div>
            <!--Second Image-->
            <div class="pic2">
                <div class="yoink2">
                    <div class="song1">
                        <a href="Songs1.jpg" target="_blank">
                        <img src="Songs1.jpg" alt="SoNgS" height="300" width="300" style="border-radius: 30px">
                        </a>
                    </div>
                    <div class="desc2">
                    <p>In this image,<br>
                    it is a written song<br>
                    named "Somewhere in Time"<br>
                    It is also a movie from 2019<br>
                    </p>
                    </div>
                </div>
            </div>
            <!--Third Image-->
            <div class="pic3">
                <div class="yoink3">
                    <div class="Poem1">
                    <a href="Creative Poems.png" target="_blank">
                    <img src="Creative Poems.png" alt="Poem1" class="shaped" style="background-size: auto;">
                    </a>
                    </div>
                    <div class="desc3">
                        <p>This is a poem..<br>
                        And
                    </div>
                </div>
            </div>

谢谢（￣︶￣ *）） 我在这里感觉有些不对..但是我找不到。.请为我找到：）