无法在所有图像上设置相同的宽度和高度

Question

我使用 javascript 和 Glider 库制作了一个图像滑块，如下所示。

正如您在我的图片中看到的那样，第三张图片与前两张图片不同，并且高度不同。我的图像文件夹中的前两张图像具有相同的宽度 1920 。第三张图片的宽度为 1200。即使我设置了图片的宽度和高度，结果也是一样的。我一直在敲我的头很长一段时间，还没有找到解决办法。

我的容器内单个元素的代码，CSS 和 Glide 库:

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

Answer 1

这样做：

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

无法在所有图像上设置相同的宽度和高度

unable to set same width and height on all images

javascript

css

glidejs