Разная высота у изображений в слайдере, как исправить

Question

Разная высота у изображений в слайдере, как исправить

Рейтинг: 0Ответов: 1Опубликовано: 13.07.2023

У меня такая проблема, разная высота изображений у slick slidera, никак не могу настроить

пробовал с помощью css как рекомендуют использовать display: flex, у родительского div height: 100% Ничего не получается, как быть.

css slick.js

Источник: Stack Overflow на русском

Answer 1

▲ 0

Задайте изображениям высоту в пикселях, тогда они растянутся по заданной высоте, а чтобы изображения сильно не сжимались можно использовать свойство object-fit

Пример:

$('.slider').slick();

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  <style>
  .slider {
    width: 500px;
    height: 500px
  }
  
  .img {
    height: 500px;
    object-fit: cover;
  }
</style>
  <title>Document</title>
</head>

<body>
  <div class="slider">
    <img class="img" src="https://dynamic-media-cdn.tripadvisor.com/media/photo-o/0f/ba/29/5c/img-worlds-of-adventure.jpg?w=1200&h=-1&s=1" alt="">
    <img class="img" src="https://media.licdn.com/dms/image/C560BAQH9Cnv1weU07g/company-logo_200_200/0/1575479070098?e=2147483647&v=beta&t=i4Pp6zVfz5VAznPIik_ua4I75sKlu4yAdGKgHC9vpTo" alt="">
    <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKX1IgtvFKCGf3PvZveYQYVIh1wNwug8oGFkFMSWRDNkrDQzfDwc7mqUfQDbAumtLEmDo&usqp=CAU" alt="">
  </div>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>

</html>

Разная высота у изображений в слайдере, как исправить

Ответы