Problème Image HTML + boostrap Redimensionner

Résolu
mister431 Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   -  
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   -
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
A voir également:

3 réponses

Réponse 1 / 3
patricia@84 Messages postés 106 Date d'inscription   Statut Membre Dernière intervention   9
 
Bonjour,

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



Patricia
0
mister431 Messages postés 56 Date d'inscription   Statut Membre Dernière intervention  
 
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
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > mister431 Messages postés 56 Date d'inscription   Statut Membre Dernière intervention  
 
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
mister431 Messages postés 56 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38486 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
Réponse 2 / 3
mister431 Messages postés 56 Date d'inscription   Statut Membre Dernière intervention  
  
<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
Réponse 3 / 3
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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

PIX
plart -
jordane45 -

1 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses
redimensionner video
marcounet33500 -
marcounet33500 -

9 réponses