Bootstrap 引导卡图像未完全包含在角周围

i7uaboj4  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(141)

我试图建立一个投资组合与引导卡的图像也需要显示。
问题是图像未正确包含在引导卡的角周围(class=“card-img-top”),如某些卡未倒圆或某些图像未倒圆但卡倒圆(尝试class=“img-rounded”)。
请放大图片以查看差异。以下是一些片段(代码在片段下方):-

**带图像的完美卡片:-**x1c 0d1x
黄色-〉差异
错误-1:-

错误-2:-

错误-3:-

**错误-4:-**x1c4d 1x

代码:-

<%- include('partials/headHTML') %>
    <link rel="stylesheet" href="/css/tourpackageStyles.css">
    </head>
    <!-- <%- include('partials/header') %> -->

        <div class="Container">
            <div class="container-fluid">
                <div class="row">
                    <div class="col col-md-4">
                        <div class="card h-100">
                            <img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
                            <div class="card-body">
                                <div class="card-title">Title-1</div>
                            </div>
                            <a target="_blank" rel="noopener noreffer" href="#" role="button"
                                class="btn btn-sm btn-secondary">Enquire</a>
                        </div>
                    </div>
                    <div class="col col-md-4">
                        <div class="card h-100">
                            <img src="/images/wildlife/wildlife_tour.jpg"
                                alt=""
                                class="card-img-top">
                            <div class="card-body">
                                <div class="card-title">Title- 2</div>
                            </div>
                            <a target="_blank" rel="noopener noreffer" href="#"
                                class="btn btn-sm btn-secondary">Enquire</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container-fluid">
                <div class="row row-cols-1 row-cols-md-3 row-cols-sm-2 gy-3">
                    <div class="col">
                        <div class="card h-100">
                            <img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
                            <div class="card-body">
                                <div class="card-title">
                                    Title- 3
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card h-100">
                            <img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
                            <div class="card-body">
                                <div class="card-title">
                                    Title- 4
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card h-100">
                            <img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
                            <div class="card-body">
                                <div class="card-title">
                                    Title- 5
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card h-100">
                            <img src="" alt="">
                            <div class="card-body">
                                <div class="card-title">
                                    Title- 6
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card h-100">
                            <img src="" alt="">
                            <div class="card-body">
                                <div class="card-title">
                                    Title- 7
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card h-100">
                            <img src="" alt="">
                            <div class="card-body">
                                <div class="card-title">
                                    Title- 8
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
yc0p9oo0

yc0p9oo01#

如果您希望在使用卡片时只显示图像,请将图像放置在卡片主体内部,以达到您的目的,并将卡片类指定为“overflow-hidden”。因为如果您使用“card-img-top”,则它只有border-top-left-radius和border-top-right-radius,因此在www.example.com上图像不会被舍入bottom.so,您必须手动为底部两侧提供border-radius。

<div class="card overflow-hidden">
       <div class="card-body">
            <img class="img-fluid" src="" alt="">
        </div>
 </div>

有关更多信息,请参阅官方文档https://getbootstrap.com/docs/5.2/components/card/

相关问题