2
votes

Comment centrer l'image sur 2 colonnes dans bootstrap

Je souhaite créer une page Bootstrap 4 en écran partagé et placer une image au centre chevauchant les deux colonnes. J'ai créé deux colonnes égales mais je ne sais pas comment placer l'image pour les chevaucher.

J'ai essayé position: absolue et float: left mais ce n'est pas le cas ne t'aide pas. Merci pour votre aide!

Attendu: Photo

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

<head>
  <title>Website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>

<body>
  <img src="https://imgur.com/Qk5Qa9M.jpg" class="mx-auto d-block" style="width:auto">
  <div class="row h-100">
    <div class="col" style="background-color:blue">
      Left
    </div>
    <div class="col" style="background-color:red">
      Right
    </div>
  </div>
</body>

</html>

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
}

col {
  height: 100vh;
}

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

html css bootstrap-4 twitter-bootstrap

1 commentaires

J'ai posté une réponse, l'avez-vous lue?

3 Réponses :

0
votes

Ajoutez z-index: 1; dans votre img css

img {
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

1 commentaires

Je vous remercie. J'ai utilisé la solution fournie par Dogukan Cayus.

0
votes

ajoutez simplement z-index à dans votre classe img

La propriété z-index spécifie l'ordre de pile d'un élément. Un élément avec un ordre de pile plus grand est toujours devant un élément avec un ordre de pile inférieur.

Remarque: z-index ne fonctionne que sur les éléments positionnés (position: absolue, position: relative ou position : corrigé)

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

<head>
  <title>Website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>

<body>
  <img src="https://imgur.com/Qk5Qa9M.jpg" class="mx-auto d-block" style="width:auto">
  <div class="row h-100">
    <div class="col" style="background-color:blue">
      Left
    </div>
    <div class="col" style="background-color:red">
      Right
    </div>
  </div>
</body>

</html>

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
}

col {
  height: 100vh;
}

img {
  position: absolute;
  top: 15%;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: 100%;
}

2 commentaires

Je vous remercie. J'ai utilisé la solution fournie par Dogukan Cayus.

pas de problème du tout, mais vous voulez choisir la première réponse, ok !!

1
votes

ceci résout votre problème:

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

<head>
  <title>Website</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>

<body>
  <img src="https://picsum.photos/400/500">
  <div class="row h-100">
    <div class="col" style="background-color:blue">
      Left
    </div>
    <div class="col" style="background-color:red">
      Right
    </div>
  </div>
</body>

</html>

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
}

col {
  height: 100vh;
}

img {
  position: absolute;
  bottom: 0; /* i deleted top:0; */
  left: 50%; /* this and below code for excellent centered */
  transform:translateX(-50%);
  z-index:2;
}

aussi, j'ai supprimé l'attribut class et style de la balise img . parce qu'ils sont inutiles.

0 commentaires