Css 引导3列中图像的高度相同（Material Kit Pro UI）

所以我开始使用Material Kit UI，现在你可以在图片中看到，列中的图像高度不同。

下面是代码：

<div class="container-fluid sec1">
    <div class="row">
        <div class="col-sm-3 col-md-2 col-lg-2">
            <div class="anime card card-blog">
                <div class="card-image animeimg">
                    <div class="timenumber">
                        <h4>2 دقیقه قبل</h4>
                    </div>
                    <a href="#" title="Sword Art Online">
                        <img class="img" src="https://i.stack.imgur.com/Ki247.jpg">
                    </a>
                    <div class="colored-shadow" style="background-image: url(&quot;https://i.stack.imgur.com/Ki247.jpg&quot;); opacity: 1;"></div>
                    <div class="ripple-container"></div>
                </div>

                <div class="card-content sectit">
                    <h6 class="category text-success">در حال پخش</h6>
                    <h4 class="card-title">
                        <a href="#" title="Sword Art Online">Sword Art Online</a>
                    </h4>

                    <div class="footer episodenumber">
                        قسمت 13
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

所以我试着改变“.card img”（从auto改为18rem）中的高度，但图像不再有响应。 我也试着设置最小高度，但效果不太好

这里有两个不同高度的图像：
-

---

-

您需要设置

.card.card图像a的高度

，然后设置

溢出：隐藏

以隐藏额外内容

.card .card-image a {
  display: block;
  height: 300px;
  overflow: hidden;
  border-radius: 10px;
}

堆栈片段

.anime{
边缘底部：20px；
背景：无！重要；
盒影：无！重要；
}
.card博客{
边缘顶部：30px；
}
.卡片{
显示：内联块；
位置：相对位置；
宽度：100%；
边缘底部：30px；
边界半径：6px；
颜色：rgba（0,0,0,0.87）；
背景：#fff；
盒影：0 2px2px0RGBA（0,0,0,0.14），0 3px1px-2pxRGBA（0,0,0,0.2），0 1px5px0RGBA（0,0,0,0.12）；
}
.卡片.卡片图像{
身高：60%；
位置：相对位置；
z指数：1；
左边距：15px；
右边距：15px；
利润上限：-30px；
边界半径：6px；
}
阿尼梅格先生{
左边距：0！重要；
右边距：0！重要；
}
.时间号码{
z指数：9999；
字体大小：12px！重要；
浮动：对；
位置：绝对位置；
填充：8px 10px；
颜色：#fff；
}
a{
文字装饰：无！重要；
}
.card.card图像img{
宽度：100%；
边界半径：6px；
指针事件：无；
盒影：0 5px 15px-8px rgba（0,0,0,0.24），0 8px 10px-5px rgba（0,0,0.2）；
}
.卡img{
宽度：100%；
高度：自动；
}
.卡片.卡片图像.彩色阴影{
变换：比例（0.94）；
顶部：12px；
过滤器：模糊（12px）；
位置：绝对位置；
宽度：100%；
身高：100%；
背景尺寸：封面；
z指数：-1；
过渡：不透明度.45s；
不透明度：0；
}
.波纹容器{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
宽度：100%；
身高：100%；
溢出：隐藏；
边界半径：继承；
指针事件：无；
}
阿尼梅格：之后{
边界半径：6px；
位置：绝对位置；
z指数：1；
宽度：100%；
身高：98.5%；
显示：块；
左：0；
排名：0；
内容：“；
背景：-webkit线性梯度（顶部，rgba（0,0,0,5）0，rgba（0,0,0,05）50%，rgba（0,0,0,05）50%，rgba（0,0,0,5）100%）；
背景：线性梯度（底部，rgba（0,0,0,5）0，rgba（0,0,0,05）50%，rgba（0,0,0,05）50%，rgba（0,0,0,0,5）100%）；
}
.卡片.卡片内容{
填充：15px 30px；
}
.sectit{
填充：0！重要；
}
.sectit>h6{
垫底：10px；
字体大小：12px；
显示：无；
}
.文本成功{
颜色：#4caf50；
}
.文本成功{
颜色：#3c763d；
}
.卡片博客.卡片标题{
边缘顶部：5px；
}
@介质（最小宽度：992px）。扇区>h4{
宽度：60%；
}
.sectit>h4{
页边距顶部：5px！重要；
边缘底部：5px；
宽度：65%；
方向：ltr；
浮动：左；
字号：700；
字体大小：.9rem；
字体系列：“Roboto浓缩版”；
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
}
标题
.标题a，
.卡片名称，
.卡片标题a，
.信息标题，
.信息标题a，
.footer品牌，
.页脚品牌a，
.页脚大h5，
.页脚大h5 a，
.页脚大h4，
.页脚大h4 a，
.媒体.媒体标题，
.媒体.媒体标题a{
颜色：#3C4858；
文字装饰：无；
}
标题
.卡片名称，
.信息标题，
.footer品牌，
.页脚大h5，
.页脚大h4，
.媒体.媒体标题{
字号：700；
字体系列：“Roboto Slab”，“Times New Roman”，衬线；
}
.sectit>h4>a{
颜色：#000；
}
标题
.标题a，
.卡片名称，
.卡片标题a，
.信息标题，
.信息标题a，
.footer品牌，
.页脚品牌a，
.页脚大h5，
.页脚大h5 a，
.页脚大h4，
.页脚大h4 a，
.媒体.媒体标题，
.媒体.媒体标题a{
颜色：#3C4858；
文字装饰：无；
}
.卡片.页脚{
边缘顶部：15px；
}
.情节编号{
浮动：对；
利润率顶部：8px！重要；
字体大小：12px；
}
.卡片.卡片图像a{
显示：块；
高度：300px；
溢出：隐藏；
边界半径：10px；
}

2 دقیقه قبل
因为你所有的图片都不是同一维度的…@Bhuwan，但正如你所看到的（例如masterani.me），有很多网站使用不同维度的图片。此外，如果您尝试代码并更改“.card img”中的高度从“自动”到“隐藏”，你会明白我的意思。他们在图像中使用了
position:absolute
。你需要设置
a
标记的高度和
overflow:hidden
。。同时在你的问题中加入图像的绝对路径来解决问题。@Bhuwan它不起作用。。。（或者可能我做得不对）请给我确切的代码好吗？首先粘贴你问题中图像的绝对路径…而不是本地路径…@Artimos删除
后会有什么变化。animeimg:after
并且你需要使用媒体查询根据屏幕大小设置
的高度
.card .card-image a {
  display: block;
  height: 300px;
  overflow: hidden;
  border-radius: 10px;
}