CODEWITHSUNDEEP
htmlcssbootstrap-4
Pritesh Bhoi
Pritesh Bhoi

Reputation: 1096

Card image width not equal when I gave max-height

I am making a card with equal image size and text. I had given max-height to the image. but the images are not equal in size. I will give my code below. I am attaching my website's snap for better reference. In this project, I am using HTML, CSS and BOOTSTRAP4

Problem is : Image

  .kbcard {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        max-width: 300px;
        margin: auto;
        text-align: center;
        font-family: arial;
    }

    .kbtitle {
        color: grey;
        font-size: 18px;
    }

    a .kb{
        text-decoration: none;
        font-size: 22px;
        color: black;
    }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 

<div class="row">
    <div class="col-md-3">
        <div class="kbcard">
            <img src="https://www.saintleuparis.catholique.fr/IMG/arton691.jpg?1467978372" alt="John" style="max-width:300px">
            <h1>John Doe</h1>
            <p class="kbtitle">CEO & Founder, Example</p>
            <p>Harvard University</p>

        </div>

    </div> 
    <div class="col-md-3">
        <div class="kbcard">
            <img src="https://www.saintleuparis.catholique.fr/local/cache-vignettes/L187xH270/images-74-b67fc.jpg?1468002198" alt="John" style="max-width:300px">
            <h1>John Doe</h1>
            <p class="kbtitle">CEO & Founder, Example</p>
            <p>Harvard University</p>

        </div>

    </div>
     
</div>

I need : Snap

Upvotes: 7

Views: 2763

Answers (3)

Kunchana Roshintha
Kunchana Roshintha

Reputation: 19

You can change the width using inline css

Check this one.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="row">
    <div class="col-md-3">
        <div class="kbcard">
            <img style="height:250px;width:250px" src="https://www.saintleuparis.catholique.fr/IMG/arton691.jpg?1467978372" alt="John">
            <h1>John Doe</h1>
            <p class="kbtitle">CEO & Founder, Example</p>
            <p>Harvard University</p>
        </div>

    </div> 
    <div class="col-md-3">
        <div class="kbcard">
            <img style="height:250px;width:250px" src="https://www.saintleuparis.catholique.fr/local/cache-vignettes/L187xH270/images-74-b67fc.jpg?1468002198" alt="John">
            <h1>John Doe</h1>
            <p class="kbtitle">CEO & Founder, Example</p>
            <p>Harvard University</p>
        </div>
    </div>
</div>

Upvotes: 0

yathavan
yathavan

Reputation: 2376

max-width not need for kbcard because you are using bootstrap. set max-height and min-height to image. and remove style="max-width:300px" from image add class="img-fluid" 

.kbcard {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        margin: auto;
        text-align: center;
        font-family: arial;
    }
    
    
    .kbcard img{
    max-height:150px;
    min-height:150px;
    }

    .kbtitle {
        color: grey;
        font-size: 18px;
    }

   

    a .kb{
        text-decoration: none;
        font-size: 22px;
        color: black;
    }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 

<div class="row">
    <div class="col-6 col-md-3">
        <div class="kbcard">
            <img src="https://www.saintleuparis.catholique.fr/IMG/arton691.jpg?1467978372" alt="John" class="img-fluid">
            <h1>John Doe</h1>
            <p class="kbtitle">CEO & Founder, Example</p>
            <p>Harvard University</p>


        </div>

    </div> 
    <div class="col-6 col-md-3">
        <div class="kbcard">
            <img src="https://www.saintleuparis.catholique.fr/local/cache-vignettes/L187xH270/images-74-b67fc.jpg?1468002198" alt="John" class="img-fluid">
            <h1>John Doe</h1>
            <p class="kbtitle">CEO & Founder, Example</p>
            <p>Harvard University</p>


        </div>

    </div>
     
</div>

Upvotes: 0

Udayavani
Udayavani

Reputation: 326

 img {
        vertical-align: middle;
        border-style: none;
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

try these stylings to your image tag

Upvotes: 7

Related Questions