Problème Image HTML + boostrap Redimensionner

Résolu
mister431 Messages postés 58 Statut Membre -  
Pitet Messages postés 2845 Statut Membre -
Bonjour, J'essaye de redimensionner avec boostrap pour que mes image pour qu'il soit centre et redimensionner mais impossible de modifier avec width et height pouvez vous m'aidez s'il vous plait ? 





<!doctype html>
<html lang="fr">
  <head>
  
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  
  
  <div class="container">
<!-- Caroussel -->
<table>
   <tr>
       <th>Nom</th>
<div id="Appartement1" class="carousel slide" data-bs-ride="true">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#Appartement1" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#Appartement1" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#Appartement1" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="img/appartement 1/1d1.jpg" class="d-block w-100" alt="image" width="100" height="300">
      </div>
      <div class="carousel-item">
        <img src="img/appartement 1/2d1.jpg" class="d-block w-100" alt="image" width="50%" height="300">
      </div>
      <div class="carousel-item">
        <img src="img/appartement 1/3d1.jpg" class="d-block w-100" alt="image" width="100" height="300">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#Appartement1" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#Appartement1" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

Test

  <div class="container"> 
<!-- Caroussel -->
<div id="Appartement2" class="carousel slide" data-bs-ride="true">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#Appartement2" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#Appartement2" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#Appartement2" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="img/appartement 2/1d2.jpg" class="d-block w-100" alt="image" width="100" height="300">
      </div>
      <div class="carousel-item">
        <img src="img/appartement 2/2d2.jpg" class="d-block w-100" alt="image" width="1000" height="300">
      </div>
      <div class="carousel-item">
        <img src="img/appartement 2/3d2.jpg" class="d-block w-100" alt="image" width="100" height="300">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#Appartement2" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#Appartement2" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

Test
  <div class="container">
<!-- Caroussel -->
<div id="Appartement3" class="carousel slide" data-bs-ride="true">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#Appartement3" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#Appartement3" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#Appartement3" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="img/appartement 3/1d3.jpg" class="d-block w-100" alt="image" width="100" height="300">
      </div>
      <div class="carousel-item">
        <img src="img/appartement 3/2d3.jpg" class="d-block w-100" alt="image" width="1000" height="300">
      </div>
      <div class="carousel-item">
        <img src="img/appartement 3/3d3.jpg" class="d-block w-100" alt="image" width="100" height="300">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#Appartement3" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#Appartement3" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

Lieu Communne 

<div class="container">
<!-- Caroussel -->
<div id="commun" class="carousel slide" data-bs-ride="true">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#commun" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#commun" data-bs-slide-to="1" aria-label="Slide 2"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="img/Zone Commune/1dz.jpg" class="d-block w-100" alt="image" width="100" height="300">
      </div>
      <div class="carousel-item">
        <img src="img/Zone Commune/2dz.jpg" class="d-block w-100" alt="image" width="1000" height="300">
      </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#commun" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#commun" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

       <th>Pays</th>
   </tr>

</body>
</html>


Configuration: Windows / Firefox 101.0

3 réponses

  1.
    patricia@84 Messages postés 114 Statut Membre 9
     
    Bonjour,

    Il serait bien de voir les css concernant ces classes...

    Patricia
    0
    1. mister431 Messages postés 58 Statut Membre
       
      Bonjour, Je ne comprend pas pourquoi on ma mis dans la catégorie CSS (car j'ai mis la catégorie autre) mais il y a pas de CSS spécifique concernant ces classe seulement du bootstrap il faut télécharger boostrap pour avoir tout les fichier java script ou CSS
      0
      1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832 > mister431 Messages postés 58 Statut Membre
         
        Bonjour,
        Par ce que le html, le css, les styles ( width/height..) .. ne sont pas de la PROGRAMMATION.
        voila pourquoi la discussion a été Redirigée du Forum Programmation vers le Forum CSS ( les styles.. c'est du css )
        0
      2. mister431 Messages postés 58 Statut Membre > jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention  
         
        Bonjour, merci de votre réponse même malgré qui ne répond toujours pas a ce problème. j'ai du mettre par erreur de programmation
        0
  2. mister431 Messages postés 58 Statut Membre
     
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="nav justify-content">
    <a class="navbar-brand" href="#">Barre de recherche</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">


    <footer>
<nav aria-label="Page navigation example" class="rainbow-text">
  
  
</nav>
</footer>


      <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>


    Voila c'est tout se que je peut vous aidez sur le CSS de mon site
    0
  3. Pitet Messages postés 2845 Statut Membre 530
     
    Bonjour,

    Commence par utiliser le validateur w3c pour corriger les erreurs html de ton document (plusieurs balises non fermées ou de manière incorrecte) : https://validator.w3.org/#validate_by_input

    N'utilises pas les tableaux html (<table>) pour faire la mise en page, utilise le système de grille de Bootstrap à la place (container, row, col).

    Tu peux appliquer la propriété max-width sur le conteneur du carrousel pour le centrer sur les écrans plus larges. Voir aussi à peut-être utiliser la classe img-fluid sur les images si tu souhaites conserver le ratio d'affichage.
    https://jsfiddle.net/3dmfjezu/
    0

Discussions similaires

Retrouver l'image originale d'une photo modifiée
Raven -
Asta972155 -

10 réponses
redimensionner video
marcounet33500 -
marcounet33500 -

9 réponses