我想在我的新闻网站(学校项目)的移动版本上制作 8 张卡片。我希望卡片都具有相同的比例,但是,我为卡片保存在计算机上的图像大小有所不同(其中一些更高)。
有没有办法让图像、标题和文本都适合卡片,而无需在将每个图像添加到项目之前调整其大小?
代码:
img {
max-width: 100%;
max-height: 100%;
display: block;
}
.cards {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 5px;
}
.card{
display: flex;
flex-direction: column;
padding: 5px;
margin: 20px;
margin-bottom: 5px;
height: 280px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}