javascript - 卡片和 img 上的高度相同

Question

我尝试用卡片制作owl-carousel。我需要帮忙做两件事。首先如何在每张卡片中将 img 裁剪为相同大小并将其居中。第二件事是如何使所有卡片具有相同的高度。我尝试了很多东西，但没有任何效果，也不知道是否与 owl-carousel css 有任何冲突或问题出在我身上

.cards {
    width: 100%;

}
a{
    text-decoration: none;
    color: black;
}
h1 {
    padding: 1rem;
}
p{
    padding: 0 1rem;
}
.card{
    
    height: 500px;
    position: relative;
    border: 1px solid gray;
    border-top: none;
    border-radius: 20px;
    cursor: pointer;
    overflow: hidden;
}
img.img_slide{
    width: 100%; 
    height: auto;
}
button{
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 30px;
    background-color: #27ae60;
    color: #fff;
    position: absolute;
    bottom: 2%;
    right: 5%;
}
@media only screen and (max-width: 450px){
    h1{
        font-size: 1.5rem;
        padding: .3rem;
    }
    p {
        padding: .3rem;
        word-wrap: break-word;
    }
    .card{
        height: 400px;
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>



    <div class="cards owl-carousel">
        <a href="#" class="jobs_link"><div class="card item">
            <img src="https://zelenaruza.sk/wp-content/uploads/2016/01/i_179285.jpg" alt="" class="img_slide">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem </p>
            <button>Read more</button>
        </div></a>
        <a href="#" class="jobs_link"><div class="card item">
            <img src="https://zelenaruza.sk/wp-content/uploads/2016/01/logo.jpg" alt="">
                    <h1>Lorem ipsum</h1>
            <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem </p>
            <button>Read more</button>
        </div></a>


    </div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:40,
    responsiveClass:true,
    responsive:{
        0:{
            items:1.2,
            nav:false,
            margin:10
        },
        600:{
            items:2.2,
            nav:false
        },
        900:{
            items:3.5,  
            nav:false
        },
        1500:{
            items:4,
            nav:false
        },
        1700:{
            items:4,
            nav:false,
            margin:100
        }
    }
})
</script>

Answer 1

好的，首先，我最喜欢创建易于缩放的图像的方法是执行以下操作:

HTML:

<div class="thumbnail"></div>

CSS:

.thumbnail {
    padding-top: 100%; // - This will create a square. 1:1
    background: red;
}

现在您已经有了一个漂亮的纵横比可缩放图像，是时候移到卡片上了。其中一些您可能需要破译，但它应该可以正常工作。

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.thumbnail {
  padding-top: 50%;
  width: 100%;
  background: red;
}

.card {
  flex-basis: 25%;
  border: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.content {
  margin-bottom: 1em;
}

.btn {
  margin-top: auto;
  display: block;
}

<div class="row">
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I am some content!
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I have some more content,
      <br/>
      that spans multiple lines.
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I have some more content,
      <br/>
      that spans multiple lines.
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
</div>