制作一张适合所有内容的卡片

Question

我想在我的新闻网站(学校项目(的移动版上制作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);
}

Answer 1

只需给图像一个高度值，该值是您希望图片达到的最高值。您必须将宽度设置为自动，以避免拉伸图片。

img {
height: 300px; /* play around with this number until you get the height you need */
width: auto;
max-width: 100%;
}

Answer 2

通常我将图像作为背景并将其居中放置。你也可以把所有的背景属性放在一起，但如果你使用php，我建议你只放在样式标签中的背景图像，其余的都作为类属性。

css解释：

溢出：隐藏->这隐藏了图像的额外边界

背景尺寸：封面->这使得图像尽可能地与容器大小相关联地拉伸/调整大小(事实上，我使用了图像600x800(语法

背景位置：居中->如果你通常修剪图像，那么沿着各个方向均匀地修剪它会更安全，但这取决于你自己。语法

奖金：为了避免小图像像图案一样重复，您还可以添加：背景重复：不重复；如果你设置背景大小：封面，你不需要这个。

/* where the magic happens */
.img-as-bg {
height: 300px;
overflow: hidden;
background-size: cover;
background-position: center center;
}

/* extra style copied from your source */
.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);
}

<div class="cards">
<div class="card" style="width: 18rem;">
<div class="img-as-bg" style="background-image: url('https://via.placeholder.com/600x800/0055ff');"></div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#">Read more</a>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="img-as-bg" style="background-image: url('https://via.placeholder.com/500x900/00ffff');"></div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#">Read more</a>
</div>
</div>
</div>