英文:
Image bottom not fit into the DIV
问题
我有一个Framework7 VUE.js项目。其中一个页面上有一个带有图片的swiper。图片位于一个具有15px边框半径的div内。问题是图片的底部与div不匹配。
<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;
}
英文:
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;
}
答案1
得分: 4
将此代码添加：
.main_img {
display: block;
}
默认情况下，图像是内联的，因此会在基线下方留下一些空间，这是默认的垂直对齐方式。`display: block` 将避免这种情况。
英文:
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.
答案2
得分: -1
空白部分是因为元素的默认行高。添加 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>
英文:
The space is because of the default lime height of the element. Add line height:0
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论