卡片显示相同大小的精选图片,无论上传的图片大小

时间:2018-07-24 18:27:03

标签: php css twitter-bootstrap

我正在一个网站上工作,我们有一个新闻版块。该页面会自动从数据库中加载文章,但出现了外观问题。

基本上,文章所在的卡片(除精选文章外)根据图像的大小均不同。

我要做的是使每张卡的尺寸相同。我的想法是无论上传的图像的实际尺寸如何,都显示相同尺寸的图像。我希望这是有道理的。

是否可以这样做?谁能带领/指导我如何做到?

下面是当前外观的图像。我要做的是使每张卡的尺寸相同。因此,创建一个显示特定大小的蒙版:

different size cards due to image size

1 个答案:

答案 0 :(得分:1)

基于我的评论的两个示例,很明显,我不确定您的实际代码

一种方法:

<style>
.card-image {
  width: 200px;
  height: 100px
}
</style>    
<div class="card">
   <img src="path/to/image.jpg" class="card-image" alt="Alt Text"/>
</div>

另一个:

<style>
.card-image {
  width: 200px;
  height: 100px
  background-image:url("path/to/image.jpg");
  background-size:cover;
}
</style>    
<div class="card">
   <div class="card-image"></div>
</div>