Disposer deux images l'une en dessous de l'autre en diagonale d'une manière réactive

Je veux deux images en diagonale l'une en dessous de l'autre comme ceci, et elles devraient rester comme cela en réponse.Disposer deux images l'une en dessous de l'autre en diagonale d'une manière réactive

Jusqu'à présent, j'ai, mais les images se déplacent quand je redimensionnez la fenêtre et il ne répond pas. Est-il possible de le rendre sensible en utilisant bootstrap?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<div class="row"> 
 
    <div class="col-md-8"> 
 
    <img class="img-responsive" align="left" src="img1.png" /> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-8"> 
 
    <img class="img-responsive" align="left" src="img2.png" /> 
 
    </div> 
 
</div>

JS Bin

Source

2017-10-16 Kemat Rochi

Voulez-vous dire que les images devraient rester comme ça dans toutes les résolutions? –

@JordiFlores - ouais, c'est ce que je cherche! –

Utilisez col-*-offset-* au lieu de l'alignement gauche/droite. Consultez l'extrait ci-dessous pour référence.

.p0 { 
 
    padding: 0 !important; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="https://code.jquery.com/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 p0"> 
 
     <img class="img-responsive" src="http://via.placeholder.com/600x400/green" /> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="row"> 
 
     <div class="col-xs-6 col-xs-offset-6 p0"> 
 
     <img class="img-responsive" src="http://via.placeholder.com/600x400" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Source

2017-10-16 06:13:40

Disposer deux images l'une en dessous de l'autre en diagonale d'une manière réactive

Répondre

Questions connexes