javascriptcssglidejs

unable to set same width and height on all images

I have made an image slider using javascript with the Glider library like below .

enter image description here

As you can see in my image however the third image is not aligned like the first 2 and has different height . My first two images in my image folder have the same width of 1920 . The third image has a width of 1200 .Even if I set the image width and height the result is the same . I've been banging my head for quite some time and have not found a solution for this .

My code for a single element inside my container, CSS and Glide libraries:

    .card__header img{
      max-width:100%;
    }
    
    .new__card {
      background-color: var(--primaryColor);
      width: 95%;
      margin: 0 auto;
    }
    
    .new__card:not(:last-child) {
      margin-right: 1rem;
    }
    
    .card__footer {
      padding: 3rem 1.4rem;
    }
    
    .card__footer h3 {
      font-size: 2.5rem;
      font-weight: 600;
      color: var(--black);
      margin-bottom: 1rem;
    }
    
    .card__footer span {
      display: inline-block;
      margin-bottom: 1rem;
      color: var(--black2);
    }
    
    .card__footer p {
      font-size: 1.5rem;
      color: var(--black2);
      margin-bottom: 1.6rem;
      line-height: 2.7rem;
    }
    
    .card__footer a button,
    .card__footer a button {
      display: inline-block;
      padding: 1.4rem 4rem;
      border: 1px solid var(--black);
      color: var(--black);
      cursor: pointer;
      transition: 0.3s;
    }
    
    .card__footer a button:focus {
      outline: none;
    }
    
    .card__footer a button:hover {
      border: 1px solid var(--black);
      color: var(--white);
      background-color: var(--black);
    }
    <div class="news__container">
              <div class="glide" id="glide_5">
                <div class="glide__track" data-glide-el="track">
                  <ul class="glide__slides">
                    <li class="glide__slide">
                      <div class="new__card">
                        <div class="card__header">
                          <img src="../images/news5.jpg" alt="">
                        </div>
                        <div class="card__footer">
                          <h3>Styling White Shirts After A Cool Day</h3>
                          <!-- <span>By Admin</span> -->
                          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo praesentium, numquam non
                            provident rem sed minus natus unde vel modi!</p>
                          <a href="#"><button>Read More</button></a>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
      
    </div>
  

    <!-- Carousel -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.theme.min.css
    ">
      <!-- Glide Carousel Script -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.min.js"></script>

Solution

  • Do this :

    .card__header img{
height : 40px; /* height that you want */
width : 100%;
object-fit : cover;
}