Problème Image HTML + boostrap Redimensionner

Résolu/Fermé

mister431 Messages postés 56 Date d'inscription jeudi 19 novembre 2020 Statut Membre Dernière intervention 24 juin 2022 - 16 juin 2022 à 11:00
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 17 juin 2022 à 12:35

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:

Problème Image HTML + boostrap Redimensionner
Image iso - Guide
Editeur html - Télécharger - HTML
Acronis true image - Télécharger - Sauvegarde
Faststone image viewer - Télécharger - Visionnage & Diaporama
Image iso windows 10 - Guide

3 réponses

Réponse 1 / 3

patricia@84 Messages postés 106 Date d'inscription vendredi 27 novembre 2015 Statut Membre Dernière intervention 24 septembre 2023 9
16 juin 2022 à 18:20

Bonjour,

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

Patricia

mister431 Messages postés 56 Date d'inscription jeudi 19 novembre 2020 Statut Membre Dernière intervention 24 juin 2022
17 juin 2022 à 08:33

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

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > mister431 Messages postés 56 Date d'inscription jeudi 19 novembre 2020 Statut Membre Dernière intervention 24 juin 2022
17 juin 2022 à 09:20

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 )

mister431 Messages postés 56 Date d'inscription jeudi 19 novembre 2020 Statut Membre Dernière intervention 24 juin 2022 > jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024
Modifié le 17 juin 2022 à 10:46

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

Réponse 2 / 3

mister431 Messages postés 56 Date d'inscription jeudi 19 novembre 2020 Statut Membre Dernière intervention 24 juin 2022
17 juin 2022 à 09:09

<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

Réponse 3 / 3

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
17 juin 2022 à 12:35

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/

Discussions similaires

la balise ou

ou ou

Comment enlever le rouge sur la photo svp ?

positionner une image dans une page html

Comment recadrer une image avec Inkscape