2つのイメージを対角線の下に斜めに配置してください。

2つのイメージを斜めに1つずつ下に配置したいと思います。2つのイメージを対角線の下に斜めに配置してください。

これまでのところ、私はこれを持っているが、私は、ウィンドウをサイズし直すと、それが応答しないときに、画像が移動しています。ブートストラップを使って反応させることは可能ですか？

<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

出典

2017-10-16 Kemat Rochi

あなたは画像がすべての解像度で、次のように滞在する必要があることを意味するのですか？ –

@JordiFlores - ええ、それは私が探しているものです！ –

使用col-*-offset-*代わりに、左/右整列します。参照のために下のスニペットを確認してください。

.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>

出典

2017-10-16 06:13:40

2つのイメージを対角線の下に斜めに配置してください。

答えて

関連する問題