異なる解像度のアラインメント

Question

画像上のテーブルのアライメントに関するいくつかの問題に直面していますが、どのパーツが正しくないのか分かりません。下の別の解像度デバイス（ラップトップ、テレビ）を使用した表示が自分のコードである場合、私のテーブルの配置は全く予想外です。

#image_overlay_panel { 
    width:100% !important; 
    float: left; 
} 

#image_overlay_panel .image{ 
background: transparent 50% 50% no-repeat url('/iameg/Acer_schematics.png');   
position: relative; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 808px; 
background-size: 100%; 
} 

#effTablehtml{ 
position:absolute; 
top: 28%; 
left: 80%; 
color: black; 
} 

高さを削除しようとしていました：808px;私の全体のイメージは以下の添付ファイルとして非常に小さくなります。間違いを共有することを心に留めてください。どうもありがとうございました。

Answer 1

あなたはすべての画面に応答へのあなたのイメージをしたい場合は、あなたのコードあなたの要件ごとに、メディア・スクリーンのCSSを使用することができます

#image_overlay_panel .image{ 
 
background: transparent 50% 50% no-repeat url('/iameg/Acer_schematics.png');  
 
position: relative; 
 
top: 0px; 
 
left: 0px; 
 
//width: 100%; <-- comment this line 
 
//height: 808px; <-- comment this line 
 
display: block; 
 
max-width: 100%; 
 
height: auto; 
 
background-size: 100%; 
 
}

Answer 2

にこのルールを修正しようと

@media screen and (min-width: 480px) { 
    body { 
    } 
}