Img not change size that modified by CSS code

Question

I have HTML structure like this :

<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>

and its CSS below:

.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;}

As you can see , I really want to set the height of the image in the flex card to be 200 px but when I did it in CSS code, nothing changed ! enter image description here

You can see from the image, the image in the second card is still longer than the rest.

But I can change it to the same height when i added inline style directly to the img tag in my html code ! Can anyone explain for me why this happen and the solution to it ? Thank you a lot !

Please, add display: inline-block; to .intro-card > img, and if it fixes the issue, let me know — Tunjay, Aug 23 '21 at 17:49
@Tunjay Thank you, I tried to add as you suggested but it doesn't work . It's so strange :(( I can set the height in inline style but it's impossible in my CSS file. — Erik Holmgren, Aug 23 '21 at 17:59
@ThắngNguyễn You can simply add `body .intro-card > img` instead of `.intro-card > img` and try. — Punit Patel, Aug 23 '21 at 18:07
So sadd, it doesn't make sense :((( but thanks for your support bro. — Erik Holmgren, Aug 23 '21 at 18:10
I just tried with codepen. you need to change put this css at the end of the css. — Punit Patel, Aug 23 '21 at 18:13
@PunitPatel Oh, it works pretty well. Can you explain for me a little bit ? Really want to know the cause of this to avoid it in the future. — Erik Holmgren, Aug 23 '21 at 18:16
Truly, I am not 100% sure but I believe there may have some internal property assigned to img. Please approve my answer. Thank you — Punit Patel, Aug 23 '21 at 18:26
I just added a perfect explanation in the answer. Hope it helps you in the future. — Punit Patel, Aug 23 '21 at 18:38

Punit Patel · Accepted Answer · 2021-08-23T18:37:32.747

0

To give a higher priority to height put CSS at end of the CSS file.

In chrome, to apply img CSS there should be a pre-defined css for flex.

i.e.: img{ min-height: 0 }

Here is solution why it's not working in chrome. Image height inside flexbox not working in Chrome

edited Aug 23 '21 at 18:37

answered Aug 23 '21 at 18:27

Punit Patel

351
2
11

Img not change size that modified by CSS code

1 Answers1