我正在写我自己的“卡片”组件，卡片的标题应该覆盖在图像上。 图像应该有一个最小高度（在本例中为100px)，然后如果文本溢出图像，它应该变得更大。 我尝试了多个StackOverflow线程，但似乎无法使img的大小扩展到父容器（如文本所包装的那样）。
null
*{
margin:0;
padding:0;
}
.card-header {
position: relative;
color: green;
height: 100px;
}
.card-header img {
border-radius: 5px 5px 0px 0px;
object-fit: cover;
height: 100%;
width: 100%;
}
.card-header-text {
position: absolute;
top: 0px;
left: 0px;
padding: 15px;
width: 100%;
}
.card-header-text-title {
font-size: 30px;
}
.card-header-text-author {
font-size: 15px;
margin-top: 10px;
font-weight: 500;
}<div class="card-header">
<img src="https://miro.medium.com/max/3000/1*vFubKHMcht1mSLSaHY6xLg.png" alt="..."></img>
<div class="card-header-text">
<h3 class="card-header-text-title">A very exciting title title title title title</h3>
<h4 class="card-header-text-author">John Smith</h4>
</div>
</div>
<br/>
<div class="card-header">
<img src="https://miro.medium.com/max/3000/1*vFubKHMcht1mSLSaHY6xLg.png" alt="..."></img>
<div class="card-header-text">
<h3 class="card-header-text-title">A very exciting title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title</h3>
<h4 class="card-header-text-author">John Smith</h4>
</div>
</div>null
所以正如我提到的，我试图让图像在文本包装时展开其父div。 非常感谢。
尝试如下所示:
将图像的位置设置为绝对位置，Z索引设置为-1，这样它就会在文本下面。 然后将卡片头的最小高度设置为100px。 其他的都应该没事！ 哦，记住一些元素，比如图像，不需要结束标记，我注意到你放了一个，这是不需要的。
null
*{
margin:0;
padding:0;
}
.card-header {
position: relative;
color: green;
min-height:100px;
width:100%;
}
.card-header img {
display: block;
border-radius: 5px 5px 0px 0px;
object-fit: cover;
position:absolute;
z-index: -1;
width: 100%;
height: 100%;
}
.card-header-text {
padding: 15px;
width: 100%;
}
.card-header-text-title {
font-size: 30px;
}
.card-header-text-author {
font-size: 15px;
margin-top: 10px;
font-weight: 500;
}<div class="card-header">
<img src="https://miro.medium.com/max/3000/1*vFubKHMcht1mSLSaHY6xLg.png" alt="..."/>
<div class="card-header-text">
<h3 class="card-header-text-title">A very exciting title title title title title</h3>
<h4 class="card-header-text-author">John Smith</h4>
</div>
</div>
<br/>
<div class="card-header">
<img src="https://miro.medium.com/max/3000/1*vFubKHMcht1mSLSaHY6xLg.png" alt="..."/>
<div class="card-header-text">
<h3 class="card-header-text-title">A very exciting title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title</h3>
<h4 class="card-header-text-author">John Smith</h4>
</div>
</div>
CSs-Grid可以做到这一点。
null
* {
margin: 0;
padding: 0;
}
.card-header {
position: relative;
color: blue;
display: grid;
min-height: 100px;
margin-bottom:1em;
}
.card-header img {
border-radius: 5px 5px 0px 0px;
object-fit: cover;
height: 100%;
width: 100%;
grid-row: 1;
grid-column: 1;
}
.card-header-text {
grid-row: 1;
grid-column: 1;
}
.card-header-text-title {
font-size: 30px;
}
.card-header-text-author {
font-size: 15px;
margin-top: 10px;
font-weight: 500;
}<div class="card-header">
<img src="https://miro.medium.com/max/3000/1*vFubKHMcht1mSLSaHY6xLg.png" alt="..." />
<div class="card-header-text">
<h3 class="card-header-text-title">A very exciting title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title title
title title</h3>
<h4 class="card-header-text-author">John Smith</h4>
</div>
</div>
<div class="card-header">
<img src="https://miro.medium.com/max/3000/1*vFubKHMcht1mSLSaHY6xLg.png" alt="..." />
<div class="card-header-text">
<h3 class="card-header-text-title">A very exciting title</h3>
<h4 class="card-header-text-author">John Smith</h4>
</div>
</div>
您需要使图像成为背景项。 下面是我的建议:在css中
.card-header-text {
position: absolute;
top: 0px;
left: 0px;
padding: 15px;
width: 100%;
background-image:url('https://miro.medium.com/max/3000/1*vFubKHMcht1mSLSaHY6xLg.png');
}
并从HTML中删除图像。
