Framework7 Vue项目中图片底部无法适配圆角DIV问题求助

问题分析 #

当前代码里，.main_img使用object-fit: fill会强制拉伸图片填充固定宽高，易导致图片比例失调；同时图片作为行内元素存在默认基线对齐间隙，再加上容器.imageview未明确高度，共同造成了图片底部无法适配圆角容器的问题。

解决方案 #

1. 修正图片适配属性与显示方式 #

把object-fit: fill替换为object-fit: cover（保持图片比例并填充容器，超出部分裁剪）或object-fit: contain（完整显示图片并保持比例），同时将图片设为块级元素消除基线间隙：

.main_img {
    object-fit: cover; /* 按需选择cover或contain */
    height: 200px;
    width: 100%; /* 用100%宽度适配容器，避免固定宽度在响应式场景出错 */
    display: block; /* 消除行内元素的基线间隙 */
}

2. 统一容器与图片高度 #

让.imageview的高度和图片高度保持一致，避免容器高度冗余：

.imageview {
    border: 2px solid;
    border-radius: 15px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    height: 200px; /* 和图片高度匹配 */
}

3. 优化Swiper Slide适配 #

添加样式确保Slide内的容器能正常居中显示：

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

修改后的完整代码示例 #

<div data-loop="true" data-slides-per-view="1" data-centered-slides="true" data-observer="true"
    data-swiper-autoplay="2000" data-pagination='{"el": ".swiper-pagination"}'
    data-space-between="20" class="swiper swiper-container swiper-init swiper-container-horizontal">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="data in filteredAcademyData" :key="data.CARD_ID">
             <div class="imageview">
                <img class="main_img" :src="data.IMAGE_PATH" alt="">
            </div> 
        </div>
    </div>
</div>

.imageview {
    border: 2px solid;
    border-radius: 15px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    height: 200px;
}

.main_img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    display: block;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

内容的提问来源于stack exchange，提问作者D.madushanka