Question 186968 in Html Question posted in
Some basic documentation can be found here.

Html – Image bottom not fit into the DIV

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

enter image description here

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search