-2
votes

Utiliser des grilles de bootstrap, comment puis-je ajouter une image réactive et adapter la grille

Mon code:

<div class="row">
  <div class="col-md-9"> 
    <img src" link "> 
  </div>
  <div class="col-md-3">
    <form> </form>
  </div>

html css bootstrap-4

2 commentaires

Pouvez-vous télécharger peu plus de code? Afin que nous puissions avoir une idée de ce que vous recherchez

Partagez votre conception

5 Réponses :

0
votes

Essayez ceci

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="row">
    <div class="col-md-9">
      <img src="image.png" class="img-responsive" alt="text">
    </div>
    <div class="col-md-3">
      <form> </form>
    </div>
</body>

</html>

0 commentaires

0
votes

Utilisez cette classe pour rendre l'image réactive dans Bootstrap 4 Class = "IMG-FLUIDE"

Si l'image est très petite en largeur et que vous souhaitez toujours faire la grille, donnez à 100% de la largeur de l'image, vous pouvez utiliser cette classe aussi "W-100" dans BS4

0 commentaires

0
votes

Regardez sur mon violon et dites-moi si c'est pourquoi vous cherchez. xxx

css: xxx

https://jsfiddle.net/m0lc37fy/

0 commentaires

0
votes

Il suffit d'ajouter IMG-fluide code> classe dans IMG code>, je mettez également à jour votre code, j'espère que ça vous aidera. Merci


    Documentation d'image réactive de bootstrap -  lien    p>
 blockQuote> 
  p> 


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-md-9"> 
    <img src="https://png.pngtree.com/thumb_back/fh260/back_pic/03/62/30/9157aa94e693d90.jpg" class="img-fluid"> 
  </div>
  <div class="col-md-3">
    <form> </form>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

0 commentaires

0
votes

IMG-FLUIDE est la réponse que vous recherchez. En tant que note latérale, à partir de Bootstrap 4, il n'ya aucune raison d'utiliser "Col-SM Col-MD Col-LG Col-XL", etc., utilisez simplement le col - et il s'ajustera automatiquement à la taille de l'écran.

0 commentaires