引导卡图像并不是完美地包含在拐角处。

Question

我正试图用引导卡构建一个组合，其中还需要显示图像。

问题是，图像不能正确地包含在拐角处的引导卡中(使用class=" card -img-top")，就像一些卡不是圆形的或者一些图像不是圆角的，但是卡是圆角的(尝试了class=“img-圆形”)。

请将图像放大以查看差异。下面是一些片段(代码在下面给出)：

带有图像的完美卡：-

​

黄->差分

Bug-1:-

​

Bug-2:-

​

Bug-3:-

​

Bug-4:-

​

代码：-

<%- 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>

Answer 1

如果您希望在使用卡时只显示图像，则将图像放置在卡体内，以实现您想要的功能，并给出卡类“溢出隐藏”。因为如果你使用“卡-img-top”，然后它只有边界-上-左-半径和边界-上-右半径，所以图像不会在bottom.so上四舍五入，你必须手动提供边界半径的两个底部。

 <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/