0

我已经使用下面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>

4

1 回答 1

1

做这个 ：

.card__header img{
height : 40px; /* height that you want */
width : 100%;
object-fit : cover;
}
于 2021-01-29T11:09:31.383 回答