我遇到了父div .img-wrapper
没有我指定的高度的情况,因此这意味着默认情况下它是自动的,比我的孩子img
大7像素,这是我期望的。占用孩子的身高。为什么会这样呢?
html:
<li class="hover:cursor-none" v-for="teammember in projectTeamData || projectTeamDataClientView" :key="teammember.id" >
<div class="w-full px-10 md:px-2 py-10 teammember_big text-left">
<div class="img-wrapper relative hover:cursor-pointer">
<img class="w-full" :src="teammember.picture">
<div class="img-overlay"></div>
<div class="work-overlay"><div class="work-description"><div class="work-title" v-text="teammember.title"></div><div class="work-phone"><span>M:</span> <a :href="'tel:' + teammember.phone_number"><span v-text="teammember.phone_number"></span></a></div><div class="work-email"><span>E:</span> <a :href="'mailto:' + teammember.email"><span v-text="teammember.email"></span></a></div></div></div>
<div class="button-holder"><a class="button">BIO & DETAILS</a>
</div>
</div>
<p class="text-black text-center name" v-text="teammember.name"></p>
</div>
</li>
CSS:
因为我希望.image-overlay
像img一样大,所以我必须为此设置bottom: 7px;
。
.img-overlay {
background-color: transparent;
position: absolute;
top: 0;
right: 0;
bottom: 7px;
left: 0;
width: 100%;
transition: background-color 0.25s ease-in-out;
}
这是我在img
上所拥有的:
img {
width: 100%; // from the tailwind
max-width: 100%;
height: auto;
}
最后,如您所见,.img-wrapper
设置为relative
顺风。