応答イメージをウィンドウのサイズ変更中に固定位置に配置する

4つの応答イメージを含むページをブロックに配置しようとしました。 1行目と2行目の2つのイメージに似ています。応答イメージをウィンドウのサイズ変更中に固定位置に配置する

私は応答して以来、私は彼らの場所にとどまっている間にそれらを縮小しようとしました。しかし、私はウィンドウのサイズを変更しようとしている間、まあまあまあです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
#image1 { 
 
    \t position:relative; 
 
    \t float: left; 
 
    padding-left: 10px; 
 
    margin-left:250px; 
 
\t border:1px solid; 
 
    } 
 
    #image2 { 
 
    \t position:relative; 
 
    \t float: left; 
 
    padding-left: 10px; 
 
    margin-left:300px; 
 
\t border:1px solid; 
 
\t padding-bottom:10px; 
 
    } 
 
    #image3 { 
 
    position:relative; 
 
    \t float: left; 
 
    margin-left:250px; 
 
    padding-top:10px; 
 
\t border:1px solid; 
 
    } 
 
    #image4 { 
 
    position:relative; 
 
    \t float: left; 
 
\t padding-top:10px; 
 
    padding-left: 10px; 
 
    margin-left:300px; 
 
\t border:1px solid; 
 

 
    }

<div class="container"> 
 
    <h2>Image</h2> 
 
    <p>This text is responsive too</p> 
 
    <img class="img-responsive" src="img.png" id="image1" alt="Chania" width="150" height="150"> 
 
    <img class="img-responsive" src="img.png" id="image2" alt="Chania" width="150" height="150"> 
 
    <img class="img-responsive" src="img.png" id="image3" alt="Chania" width="150" height="150"> 
 
    <img class="img-responsive" src="img.png" id="image4" alt="Chania" width="150" height="150"> 
 
</div>

任意の提案を大幅..

出典

2017-02-05 harishk

まずオフ理解されます。私はあなたがブートストラップを使用しているのを見ます。組み込みのグリッドレイアウトシステムを使用していることを確認してください。行と列を設定しない限り、コンテナは使用されません。それはあなたの反応的な行動のほとんどを処理します。

次に、2つのイメージを連続して設定する必要があります。イメージの位置を設定する理由がわかりません。イメージをコンテナの外に届かせない限り、実際にポジションを利用する必要はありません。

ポジションが必要な場合。親は相対的な特性を持つことになります。移動したい子は絶対に設定されます。プロパティの詳細についてはGoogleのmdnの位置。注：子の位置を絶対値に設定しないと、その要素は通常のフローのままで、相対的な親を無視します。このような

何かが、あなたは正しい方向に向かってしまうかもしれません：

<style> 
 
    parent-div { 
 
     position: relative; 
 
    } 
 
    child-image { 
 
     position: absolute; 
 
     left: 0; 
 
     top: 0; 
 
    } 
 
    child-text { 
 
     position: absolute; 
 
     bottom: 10px; 
 
     left: 0; 
 
     z-index: 10; /*set text above image*/ 
 
    } 
 
    img { 
 
     width: 100%; /* fill to parent */ 
 
    } 
 
</style> 
 

 
<body class="container-fluid"> 
 
<div class="row"> 
 
    <div class="col-md-6 parent-div"> 
 
     <p class="child-text">This text is responsive too</p> 
 
     <img class="child-image" href="" alt=""> 
 
    </div> 
 
    <div class="col-md-6 parent-div"> 
 
     <img class="child-image" href="" alt=""> 
 
    </div> 
 
</div><!-- End of row --> 
 
<div class="row"> 
 
    <div class="col-md-6 parent-div"> 
 
     <p>This text is responsive too</p> 
 
     <img class="child-image" href="" alt=""> 
 
    </div> 
 
    <div class="col-md-6 parent-div"> 
 
     <img class="child-image" href="" alt=""> 
 
    </div> 
 
</div><!-- End of row --> 
 

 
</body><!-- End of page -->

出典

2017-02-05 17:11:38

は、なぜ我々は、マージントップ/左スタイルのタグで画像や位置のサイズを変更することはできませんか？ – harishk

あなたは...ボックスモデルを理解すれば、HTML要素を使用することができます。マージンが崩壊し、ページのフローから要素が削除されます。これは、他のポジションの問題、オーバーラップなどにつながる可能性があります。これは、あなたにとって大きな問題を引き起こす可能性があります。構造を使ってサイトを構築し、マージンとパディングを使用してサイトを調整します。 –

また、応答する動作を構造体で処理する必要があります。そうでない場合は、さまざまなデバイスに要素を適切に配置するために、大量のメディアクエリを作成します。あなたはブートストラップを持っています、そして、それはまさにそのためのものです。レスポンシブな構造。 –

応答イメージをウィンドウのサイズ変更中に固定位置に配置する

答えて

関連する問題