Image bottom not fit into the DIV

Question

I have a framework7 VUE.js project. One page I have a swiper with images. The image is inside a div which I have 15px border-radius. Problem is bottom of the image is not fit with the div.

Code...

<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 5px 5px 5px;
    overflow: hidden;
    text-align: center;
    position: relative;
}

.main_img {
    object-fit: fill;
    height: 200px;
    width: 400px;
}

check it maybe can help https://stackoverflow.com/questions/3029422/how-to-auto-resize-an-image-while-maintaining-aspect-ratio — yasin bany yasin, Jun 15 '23 at 11:49
You need to set vertical-align: top; for img tag. @D.madushanka — Jainam, Jun 15 '23 at 11:50

Johannes · Accepted Answer · 2023-06-15T11:53:23.473

4

Add this:

.main_img {
  display: block;
}

By default, the image is inline, therefore some space will be left below the baseline, which is the default vertical alignment. display: block will avoid that.

edited Jun 15 '23 at 11:53

answered Jun 15 '23 at 11:51

Johannes

64,305
18
73
130

score -1 · Answer 2 · answered Jun 15 '23 at 12:14

The space is because of the default lime height of the element. Add line height:0

.imageview {
    border: 2px solid;
    border-radius: 15px;
    margin: 5px 5px 5px 5px;
    overflow: hidden;
    display: inline-block;
    position: relative;
    line-height: 0;
}

.main_img {
    object-fit: fill;
    height: 200px;
    width: 400px;
}

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

Image bottom not fit into the DIV

2 Answers2