Owl Carousel卡片等高及图片等比例裁剪居中问题求助

Hey there! Let's fix those two frustrating issues with your Owl Carousel cards—let's start with the images, then tackle the card heights.

1. Fixing Image Cropping & Centering #

The first issue is that one of your images wasn't using the .img_slide class (the second one!), so your styling wasn't applying to it. Beyond that, we'll use object-fit to ensure all images scale and crop consistently to the same size while staying centered.

2. Ensuring Uniform Card Heights #

Owl Carousel can sometimes struggle with consistent card heights if content sizes vary, but using flexbox inside the cards will help lock in heights and keep your button anchored to the bottom, no matter how much text is inside.

Here's the revised code with explanations:

Updated CSS

.cards { width: 100%; }
a{ text-decoration: none; color: black; }
h1 { 
  padding: 1rem; 
  margin: 0; /* Remove default margin to avoid spacing inconsistencies */
}
p{ 
  padding: 0 1rem; 
  margin: 0; 
  flex-grow: 1; /* Make the paragraph fill remaining space, pushing the button down */
}
.card{ 
  height: 500px; 
  position: relative; 
  border: 1px solid gray; 
  border-top: none; 
  border-radius: 20px; 
  cursor: pointer; 
  overflow: hidden;
  display: flex; /* Use flexbox to align content vertically */
  flex-direction: column;
}
.img_slide{ 
  width: 100%; 
  height: 200px; /* Fixed height for all images */
  object-fit: cover; /* Crop image to fill the container while maintaining aspect ratio */
  object-position: center; /* Keep the image centered when cropping */
}
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; }
  .img_slide{ height: 150px; /* Adjust image height for mobile */ }
}

Updated HTML (Fixed Missing Class)

<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="" class="img_slide"> <!-- Added missing .img_slide class -->
<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>

JavaScript (No Changes Needed)

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

Key Changes Explained: #

• Image Fix: object-fit: cover ensures images scale to fill the fixed-height container without stretching, and object-position: center keeps the most important part of the image visible. We also fixed the missing .img_slide class on your second image.
• Card Height Fix: Using display: flex and flex-direction: column inside .card lets us control how content fills the space. flex-grow: 1 on the <p> tag makes it expand to fill any empty space, ensuring the button stays anchored to the bottom across all cards. Removing default margins from h1 and p also prevents unexpected spacing differences.

内容的提问来源于stack exchange，提问作者Miroslav