イメージをピクセルではなく画面の割合にしますか？

私のWeb開発クラスでは、3つの画像があります.1つは画像上でクリックするとレースを開始し、もう1つは画面上で競合します。自宅の私のPCで、画像はほぼ完璧に画面上に配置され、レース画像が終わると、画像を開始する画像が表示されます。学校では、スクリーンを横切って移動する画像は、画像が上になり、他の2つの画像がピクセル単位で小さいので、画像を上に移動することはありません。どのようにしてレースを始めるイメージを、ほぼ半分の画面サイズにすることができますか。そして、2つの他のイメージは、互いの上にあるので、ほぼ半分のサイズになります。イメージをピクセルではなく画面の割合にしますか？

私はJavaScriptコードを持っていますが、それはただここ

を移動するための画像を取得することであることはここで

<body> 
<div id="location" class="clickme"> 
<input type="image" id="start" src="death.png" alt="dstar" onclick="startRace()" class="img3"> 
</div> 
<div class="raceTrack"> 
<img src="tie.png" id="1" alt="tie" class="img1"> 
<hr> 
<img src="xwing.png" id="x-wing" alt="xwing" class="img2"> 
</div> 
<div id="announce" class="hidden"> 
<span id="message">and the winner is...</span> 
<img id="winner" src="1.png" alt="x-wing.png" > 
</div> 
</body>

スタイルコードあなたが使用する必要があります

<style> 
body { 
background-image: url(home.png); 
background-repeat: no-repeat; 
background-size: 100%; 
} 
div.raceTrack { 
position: fixed; 
margin: auto; 
bottom: 0px; 
left: 0px; 
} 
div#location{ 
position: absolute; 
top: 0px; 
right: 0px; 
} 
img { 
display: inline-block; 
position: relative; 
transition: all 0.2s; 
} 
div#announce { 
position: fixed; 
margin: auto; 
top: 0px; 
left: 0; 
right: 0; 
height: 10em; 
width: 10em; 
text-align: center; 
transition: all 0.5s; 
} 
.hidden { 
opacity: 0; 
top: 0px; 
bottom: 0px; 
} 
</style>

出典

2016-10-18 Sammy

あるボディイメージですあなたのCSSの相対単位。

%が親（または最も近い固定ユニット）に対するものである

vhとvwは、0から100までであり、ビューポート（ウィンドウサイズ）を表す

だから：

<div style="width: 500px;"> 
    <div style="width: 50%">This will be 50% of 500px</div> 
    <div style="width: 50vw;">This will be 50% of window width</div> 
</div>

vh（ビューポートの高さ）とvw（ビューポートの幅）を使用すると、ウィンドウのサイズが変更されると自動的に調整されます。

出典

2016-10-18 15:56:58 Simon

画像のdiv内の本文には、

– Sammy

と

を追加する必要がありますか？コードのスタイル部分には何もしませんか？ – Sammy

これらのコメントは絶対に気にしないでください。私はそれを考え出した。 #Simonrules – Sammy

イメージをピクセルではなく画面の割合にしますか？

答えて

関連する問題