0

我经历过.img-wrapper我没有给定高度的父 div，所以这意味着它是自动的，默认情况下它比它的孩子大 7px，img而我期望它会占据孩子的高度。为什么会这样？

的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为你可以看到顺风。

4

0 回答 0