制作适合所有内容的卡片

问题描述

我想在移动版新闻网站（学校项目）上制作8张卡片。我希望这些卡的比例相同，但是我保存在计算机上的图像的尺寸有些不同（有些更高）。

是否有一种方法可以使图像，标题和文本完全适合卡片，而无需在将其添加到项目之前重新调整每个图像的大小？

I wish for all cards to look like this

How the cards look like when the image size differ

代码：

private void textBox1_KeyDown(object sender,KeyEventArgs e)
{
 //code here..
}

解决方法

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

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

,

通常，我将图像作为背景并将其居中放置。您也可以将所有背景属性放在一起，但是如果您使用php，我建议仅将 background-image 标记为 style 标记，并将其余所有标记作为类属性。

css的解释：

溢出：隐藏； ->这样可以隐藏图像的额外边界

background-size：cover; ->这样可以使图像相对于容器尺寸尽可能地拉伸/调整大小（实际上我使用的是600x800图像）Syntax >

背景位置：居中居中； ->如果您通常修剪图像，则在各个方向上均匀地修剪图像是比较安全的，但这取决于您。 Syntax

奖金：为确保避免小图像像图案一样重复，您还可以添加： 背景重复：不重复； 如果您设置背景尺寸：封面，则不需要此。

/* 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.2),0 6px 20px 0 rgba(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>