Img 不会改变由 CSS 代码修改的大小答案

【问题标题】：Img not change size that modified by CSS codeImg 不会改变由 CSS 代码修改的大小
【发布时间】：2021-08-24 02:37:32
【问题描述】：

我有这样的 HTML 结构：

<div class="card-container">
                <div class="intro-card">
                    <img src="/Users/thangna/Desktop/snkr/thang-files/webdev.jpeg" alt="">
                    <h3>CAREER</h3>
                    <p>Realizing that becoming a great web developer is not easy, I'm trying my best to achieve my targets everyday to level up myself. My journey as well as my achievement in my web developing career will be updated here once I have free timm !</p>
                </div>
                <div class="intro-card">
                    <img src="/Users/thangna/Desktop/snkr/thang-files/bball.jpeg" alt="">
                    <h3>BASKETBALL</h3>
                    <p>Realizing that becoming a great web developer is not easy, I'm trying my best to achieve my targets everyday to level up myself. My journey as well as my achievement in my web developing career will be updated here once I have free timm !</p>
                </div>
                <div class="intro-card">
                    <img src="/Users/thangna/Desktop/snkr/thang-files/webdev.jpeg" alt="">
                    <h3>CAREER</h3>
                    <p>Realizing that becoming a great web developer is not easy, I'm trying my best to achieve my targets everyday to level up myself. My journey as well as my achievement in my web developing career will be updated here once I have free timm !</p>
                </div>
            </div>

及其CSS如下：

.card-container {
display: flex;
flex: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-left: auto;}

.intro-card {
display: flex;
flex: auto;
flex-direction: column;
justify-content: center;
width: 25%;
height: 700px;
border-radius: 20px;
background-color: #fff  ;
padding: 10px;
margin: 5% 20px;};

.intro-card > img{
height: 200px;}

.intro-card > h3 {
margin: 10px;
text-align: center;}

如您所见，我真的想将 flex 卡中图像的高度设置为 200 像素，但是当我在 CSS 代码中进行设置时，没有任何改变！ enter image description here

从图片可以看出，第二张卡片中的图片还是比其他的要长。

但是当我将内联样式直接添加到我的 html 代码中的 img 标签时，我可以将其更改为相同的高度！谁能为我解释为什么会发生这种情况以及解决方法？非常感谢！

【问题讨论】：

请添加 display: inline-block;到 .intro-card > img，如果它解决了问题，请告诉我
@Tunjay 谢谢，我尝试按照您的建议添加，但它不起作用。太奇怪了:((我可以用内联样式设置高度，但在我的 CSS 文件中这是不可能的。
@ThắngNguyễn 您可以简单地添加 body .intro-card > img 而不是 .intro-card > img 并尝试。
很伤心，这没有意义:(((但是谢谢你的支持兄弟。
我刚用 codepen 试过。你需要改变把这个css放在css的末尾。

标签： html css

【解决方案1】：

为了给高度赋予更高的优先级，请将 CSS 放在 CSS 文件的末尾。

在 chrome 中，要应用 img CSS，应该有一个用于 flex 的预定义 css。

即：img{ min-height: 0 }

这是为什么它不能在 chrome 中工作的解决方案。 Image height inside flexbox not working in Chrome

【讨论】：