Html 卡图像对齐

我想让我的卡中的图像固定在卡体的顶部。我尝试了bottom:0，但不起作用。我希望卡体具有固定高度，并固定在底部（正在工作）。但我希望这些图像固定在顶部，因为它们有不同的大小和比例。请找个人帮忙

适合
专业的商务主管形象
299欧元

对卡体使用

位置：绝对

.card-body{
    position:absolute;
    bottom:0;
 }

.card img top{
宽度：100%；
边框左上半径：计算（0.25rem-1px）；
边界右上角半径：计算值（0.25rem-1px）；
}
.卡片{
位置：相对位置；
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
最小宽度：0；
高度：650px；
单词包装：打断单词；
背景色：#fff；
背景剪辑：边框框；
边框：1px实心rgba（0,0,0,0.125）；
边界半径：0.25雷姆；
}
.卡体{
位置：绝对位置；
底部：0；
}

适合
专业的商务主管形象
299欧元

对卡体使用

位置：绝对

.card-body{
    position:absolute;
    bottom:0;
 }

.card img top{
宽度：100%；
边框左上半径：计算（0.25rem-1px）；
边界右上角半径：计算值（0.25rem-1px）；
}
.卡片{
位置：相对位置；
显示：-ms flexbox；
显示器：flex；
-ms-flex方向：列；
弯曲方向：立柱；
最小宽度：0；
高度：650px；
单词包装：打断单词；
背景色：#fff；
背景剪辑：边框框；
边框：1px实心rgba（0,0,0,0.125）；
边界半径：0.25雷姆；
}
.卡体{
位置：绝对位置；
底部：0；
}

适合
专业的商务主管形象
299欧元

您需要使用flexbox

<div class="card">
    <div class="wrapper-image">
        <img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
    </div>
    <div class="card-body">
    <h5 class="card-title">Suit</h5>
    <p class="card-text">Professional, business executive look.</p>
    <p class="text-center">€299</p>
    <a href="#" class="btn btn-success btn-block">Add to cart</a>
  </div>
</div>

.wrapper-image {
    height: 18rem;
    display: flex;
    align-items: flex-start;
}

适合
专业的商务主管形象
299欧元
.包装器图像{
身高：18雷姆；
显示器：flex；
调整项目：灵活启动；
}

在这种情况下，包装器imagem将具有

18rem高度

，它比image大，因此align itens属性将imagem放在起始div（顶部），您也可以使用

center

和

flex end

代替

flex start

，display flex允许您使用

align items

和

justify content

属性（这允许您水平定位图像）

display flex

也可用于将标签内的所有内容放在同一行上，因此，如果在包装器图像内放置两个图像，则它们将并排显示，为了纠正错误，可以使用

flex direction:column

如果没有 您可以查看有关flexbox的更多信息 如果这没有用，最好显示你的代码，如果可能的话，把它放在代码笔里，这样我会更有用

你需要使用flexbox

<div class="card">
    <div class="wrapper-image">
        <img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
    </div>
    <div class="card-body">
    <h5 class="card-title">Suit</h5>
    <p class="card-text">Professional, business executive look.</p>
    <p class="text-center">€299</p>
    <a href="#" class="btn btn-success btn-block">Add to cart</a>
  </div>
</div>

.wrapper-image {
    height: 18rem;
    display: flex;
    align-items: flex-start;
}

适合
专业的商务主管形象
299欧元
.包装器图像{
身高：18雷姆；
显示器：flex；
调整项目：灵活启动；
}

在这种情况下，包装器imagem将具有

18rem高度

，它比image大，因此align itens属性将imagem放在起始div（顶部），您也可以使用

center

和

flex end

代替

flex start

，display flex允许您使用

align items

和

justify content

属性（这允许您水平定位图像）

display flex

也可用于将标签内的所有内容放在同一行上，因此，如果在包装器图像内放置两个图像，则它们将并排显示，为了纠正错误，可以使用

flex direction:column

如果没有 您可以查看有关flexbox的更多信息

---

---

如果这没有用，最好显示您的代码，如果可能的话，将其放在代码笔中，这样我就更有用了

您是否尝试过CSS属性“position:absolute；top:0%；”如果我们能够看到代码以解释到底发生了什么以及问题在哪里，这将非常有用，请编辑与此场景相关的代码。尝试使用CSS和图像的大小。我们可以看到样式表，这些元素所具有的类的属性非常重要。这些格式设置失败的原因在于这些类，而无法看到它们，除了从头开始完全重新设计前端，我不知道还有人能帮上什么忙。你有没有尝试过CSS属性“position:absolute；top:0%；”如果我们能看到代码来解释到底发生了什么以及问题在哪里，那将非常有帮助，请编辑与此场景相关的代码。尝试使用CSS和图像的大小。我们可以看到样式表，这些元素所具有的类的属性非常重要。这些格式设置失败的原因在于这些类，而无法看到它们，除了从头开始重新设计前端之外，我不知道有人能帮上什么忙。我已经添加了这一功能，但我希望将卡img固定到卡体的顶部。你想要

中的图像吗。卡体

？只需执行顶部：0；然后亚当，位置：绝对是最重要的部分，我在我第一次对OP的评论中提到了这一点。嗨，伙计们，是的，绝对位置成功了。我不得不用thr卡体从底部的高度（218px）来抵消它，它工作了。谢谢。我已经添加了，它可以工作了，但是我希望卡img固定在卡体的顶部。你想要

中的图像吗？卡体

？只需执行顶部：0；然后亚当，位置：绝对是最重要的部分，我在我第一次对OP的评论中提到了这一点。嗨，伙计们，是的，位置绝对d