5542 sujets

Sémantique web et HTML

Bonjour à tous,

Je suis en train d'apprendre le développement web de façon autodidacte et je réalise pour cela mon premier site web avec Bootstrap en HTML/CSS pour une association culturel et je bloque sur plusieurs éléments pour finalisé celui-ci dont un carrousel Bootstrap.

Je voudrait faire en sorte que les 3 images du carrousel soit à la même taille aussi bien en hauteur que longueur, un peu comme s'ils était placé dans un container égalisant leur résolution.

Voici le code, si vous avez des pistes je suis preneur ! Merci d'avance pour votre aide.

<section>
<div class="container"> 
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="Images/main-image.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Images/57159958_459719448098720_7897758066303565824_n.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Images/56857552_621062855032435_8575637363131154432_n.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>   
</div>
</section>

Modifié par AdrienSergent (10 May 2019 - 19:04)
Le plus simple reste de redimensionner tes images à la même taille, à la main dans ton logiciel de traitement d'image avant de les afficher dans ton carrousel.

Tu pourrais utiliser du CSS et/ou javascript pour les dimensionner 'dynamiquement' mais ça reste compliqué de savoir exactement comment elles seront coupées et ou déformées.

Cela dépend de ton usage.
Modifié par gaelgerard (14 May 2019 - 14:12)
Meilleure solution