2016-08-23 3 views
0

こんにちは私は、リスト項目の上に画像を配置し、それを反応させるのに問題があります。全幅では正しく動作しますが、ブラウザを縮小すると位置合わせが外れてしまいます。あなたは私が下の写真で話していることを見ることができます。画像を反応的に配置する方法は?

全幅:(ワイド1920ピクセルでのブラウザー)

enter image description here

ブラウザが縮小された後:(1400ピクセルでのブラウザー幅)

enter image description here

HTML:(最低限をhtmlはこの質問に必要です)

<section class="contact"> 
    <ul> 
     <li> 
      <img src="/images/footer_box.svg" > 
     </li> 

     <li> 
      <img src="/images/footer_box.svg" > 
     </li> 

     <li> 
      <img src="/images/footer_box.svg" > 
     </li> 
    </ul> 
</section> 

CSS:(この質問のために必要な最低限のCSS)

.contact ul li { 
    position: relative; 
} 

.contact ul li img { 
    position: absolute; 
    left: 214px; 
    top: -110px; 
} 

ありがとう!

+0

アブソリュートポジショニングは、ウェブページをレイアウトする**非常に**貧弱な方法です。これは非常に柔軟性がなく、より優れた応答性の高いオプションがあります。 [** LearnLayout.com **](http://learnlayout.com/)をチェックしてください。 –

答えて

1

センターに配置したい場合。

.contact ul li img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 
+0

は完全に機能しました。ありがとうございました。 –

関連する問題