【问题标题】:Card display same size featured image no matter size of uploaded image卡片显示相同大小的特色图片,无论上传图片大小
【发布时间】:2018-07-25 02:34:18
【问题描述】:

我正在开发一个网站,我们有一个新闻部门。该页面会自动加载数据库中的文章,但我遇到了外观问题。

基本上,文章所在的卡片(除了特色文章)根据图片大小都不同。

我想要做的是保持每张卡片的大小相同。我的想法是让它显示相同大小的图像,无论上传的图像的实际大小如何我希望这是有道理的。

可以这样做吗?谁能引导/指导我如何做到这一点?

下面是它目前的样子。我想做的是使每张卡片的大小相同。所以,有点,创建一个显示特定大小的蒙版:

【问题讨论】:

  • 只需在图像上设置固定的高度和宽度。不过,你会面临比例问题。或者,在 CSS w3schools.com/cssref/pr_background-image.asp 中使用 background-image 并设置背景:cover
  • @Dammeul 我已经在它们上设置了固定的硬件,是的,我处理了我试图避免的比率问题。我正在考虑如何创建一个框架,其中图像站点以及不适合框架的内容被隐藏。想想 Photoshop 中的蒙版效果
  • 是的,我展示背景图像使用的示例就是您所追求的!

标签: php css twitter-bootstrap


【解决方案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>

【讨论】:

  • 就是这样!非常感谢!
猜你喜欢
  • 2012-12-12
  • 2015-04-23
  • 2021-06-13
  • 1970-01-01
  • 2013-10-26
  • 1970-01-01
  • 2014-06-22
  • 2020-06-08
  • 1970-01-01
相关资源
最近更新 更多