Carrousel du hibou 2 images au format 16:9 (responsive)

Question

J'utilise owl carousel 2 et mon problème est que je cherche une solution pour maintenir le ratio d'aspect des images lorsque les utilisateurs redimensionnent la fenêtre du navigateur (responsiveness) sur la base du design du graphiste.

ce qui rend le développement plus difficile, chaque élément est un carrousel comprenant 3 images,
J'utilise cette fonction dans Scss pour rendre mes images 16:9 :

@function aspect($width) {
    @return $width * 9 / 16;
}

qui n'est pas très interactive et renvoie toujours la taille statique de l'image (bien que j'aie écrit des media queries à différentes échelles, ce n'est toujours pas très stable)

Voici le code d'initialisation de mon carrousel :

 $('.owl-carousel').owlCarousel({
        nav: false,
        dots: true,
        items: 1,
        center: true,
        //autoWidth: true,
        loop: true,
    });

et mon code HTML est :

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
        <a href="@Url.Action("Video", "Service")">
            <div class="owl-carousel owl-theme">
                <div class="item">
                    <img src="@service.serviceThumbpath" alt="@service.serviceName" title="@service.serviceName" />
                </div>
                @foreach (var thumb in videoThumbpath)
                {
                    <div class="item">
                        <img src="@thumb" alt="@serviceName" title="@serviceName" />
                    </div>

                }
            </div>
            <h5> @service.serviceName</h5>
            <div class="details">
                @{
                    _serviceRate = float.Parse(service.serviceRate);
                }
                <p class="pull-left">@service.VideoCount </p>

            </div>
        </a>
    </div>

Est-ce qu'il y a une solution pour que je puisse rendre les images réactives à travers le carrousel hibou 2 ?

Merci beaucoup

Answer 1

J'ai trouvé la solution, j'ai ajouté ces styles à mon fichier Scss :

.outer {
position: relative;

&:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (9 / 16) * 100%;
}

> .inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
}
}

Ensuite, j'ai modifié mon Html comme suit :

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">
    <a href="@Url.Action("Video", "Service")">
        <div class="owl-carousel owl-theme">
            <div class="item outer">
                <img src="@service.serviceThumbpath" alt="@service.serviceName" title="@service.serviceName" class="inner"/>
            </div>
            @foreach (var thumb in videoThumbpath)
            {
                <div class="item outer">
                    <img src="@thumb" alt="@serviceName" title="@serviceName"  class="inner"/>
                </div>

            }
        </div>
        <h5> @service.serviceName</h5>
        <div class="details">
            @{
                _serviceRate = float.Parse(service.serviceRate);
            }
            <p class="pull-left">@service.VideoCount </p>

        </div>
    </a>
</div>

et il a fonctionné en conservant le format 16:9 avec owl carousel 2 :)

pour le système de grille de la page, j'ai utilisé Ce CodePen ce qui a été très utile pour mes tailles personnalisées.

Answer 2

J'ai défini la hauteur et la largeur comme suit :

.owl-carousel {
  height: 100%;
  overflow: hidden;
}

.owl-carousel .owl-item img {
  display:block;
  height:100%;
  width: auto;
}

jQuery :

owl.owlCarousel({
    items:3,
    autoWidth: true,
});

Answer 3

Quelque chose comme ceci devrait fonctionner. Ajout d'un fixe width au conteneur. Ensuite, avec le img css, il devrait conserver son rapport d'aspect, comme vous l'avez fait pour l'aspect.

.item {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="item">
  <img width="400" height="400" src="@service.serviceThumbpath" alt="@service.serviceName" title="@service.serviceName" />
</div>

Ce n'est qu'un exemple, vous pouvez utiliser votre propre largeurs y hauteurs . On pourrait également ajouter .item seulement à certaines @media demande.