このコードをさまざまなウィンドウサイズに拡大するにはどうすればよいですか？

私は同様の質問から多くのソリューションを試しましたが、私のページでは機能していないようです。これは私がスケールしたいコードです。もう少し薄い、gifの下に、行ごとに3つのボックスを保持したいと思うので、大きなウィンドウサイズに移動すると、ボックスの1つが上に移動するように見えます。それは「スケール」を作る以上にこのコードをさまざまなウィンドウサイズに拡大するにはどうすればよいですか？

<hmtl> 
<body> 



<style> 



* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
margin: 0; 
padding: 0; 
} 

.item { 
position: relative; 
float:left; 
border: 0px solid #333; 
margin: 0%; 
overflow: hidden; 
width: 425px; 
} 
.item img { 
max-width: 100%; 

-moz-transition: all 1s; 
-webkit-transition: all 1s; 
transition: all 1s; 
} 
.item:hover img { 
-moz-transform: scale(1.1); 
-webkit-transform: scale(1.1); 
transform: scale(1.1); 
} 

</style> 


<div class=“main”> 

<img src="http://i.imgur.com/PbeUJ56.gif” style="position:absolute; top:0; left:0;" alt=“DESCRIPTION” height=“1280” width=“645”/> 




<img src="http://imgur.com/JBWbug1.png" style="position:absolute; top:0; left:0;" alt=“DESCRITPION” height=“2000” width=“720” alt="" usemap="#Map" /><map name="Map" id="Map"> 
<area alt="" title="" href="" shape="poly" coords="208,42,47,41,41,132,211,132" /> 
<area alt="" title="" href="" shape="poly" coords="467,73,467,98,654,99,654,74" /> 
<area alt="" title="" href=" shape="poly" coords="683,73,685,98,855,97,855,77" /> 
<area alt="" title="" href="" shape="poly" coords="883,71,883,97,986,96,986,77" /> 
<area alt="" title="" href="" shape="poly" coords="1007,69,1007,95,1092,95,1091,79"/> 
<area alt="" title="" href="" shape="poly" coords="1122,71,1122,100,1230,99,1230,71" /> </map> 





<div id="zoom"> 

<div class="item"> 
<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img"> 
</div> 

<div class="item"> 
<a href=""><img src="http://imgur.com/zMVcoiJ.png" alt="img"> 
</div> 

<div class="item"> 
<a href=""><img src="http://imgur.com/aVdSekS.png” alt="img" > 
</div> 

<div class="item"> 
<a href=""><img src="http://imgur.com/MKjyo1I.png” alt="img" > 
</div> 

<div class="item"> 
<a href=""><img src="http://imgur.com/tpYHlOP.png” alt="img" > 
</div> 

<div class="item"> 
<a href=""><img src="http://imgur.com/kzy9T7h.png” alt="img" > 
</div> 

</div> 
</div> 



<html> 
<body>

出典

2016-04-06 Rohit Kandula

「あなたが望むように、あなたはそれが応答にする必要があり応じる。ので、代わりのピクセルで幅を設定する（」PX「）は（％」）の割合を使用」。

ので、あなたの「.item」CSSがそうのように変更します。

 .item { 
      position: relative; 
      float: left; 
      border: 0 solid #333; 
      margin: 0; 
      overflow: hidden; 
      width: 33.3%; 
      max-width: 425px; 
     }

次に、あなたが適切にあまりにもあなたのメイン画像を変更する必要がありますしかし、あなたのコードから、あなたが歩くことができる前に実行しようとしているかもしれないようです小さなものから始め、ウェブデザインとdevの基本を学ぶelopment例えば、そこにオフ構築：

は今までこの

* { 
    //... 
    }

ではなく、あなたの要件のためにこれを行う行わない。

.main div{ 
    //... 
}

のインラインスタイリングをしないあなたがない限りこれは悪い習慣です：

style="position:absolute; top:0; left:0;"

すべての「終了タグ」にはスラッシュが必要です：

<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img"></a>

を、これはない：それはお勧めします

<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img">

（< = HTML4 =が必要）置くために、このようなあなたのアンカータグを閉じない

<body>

</body>

内側のスタイルのタグ"body"要素ではなく "head"要素である...

「レスポンシブウェブデザイン」でブートストラップとチュートリアルについて学ぶことができます。類似点...あなたがそのことを知ったら（それは難しいことではありません） - あなたは偉大な探している応答ウェブサイトを設計するあなたの方法によくなります。

は、私はあなたの問題を理解

出典

2016-04-06 05:41:29 EaziLuizi

...これはあなたの方法であなたを助け願っています。 CSS Flexboxを使用して書式設定の問題を修正しました。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

私は425pxでグリッドに加えて列のレイアウトをサポートするメディアクエリを追加しました。

コードにいくつかの小さなバグがあります： 1）閉じるhtmlタグとbodyタグは逆の順序であり、スラッシュを閉じて閉じる必要があります。 2）このHTML文書には「頭」はありませんので、CSSを追加して移動しました。 3）必須ではありませんが、imgタグなどの自己終了HTMLタグをスラッシュ/で終わらせてください。 4） 'a'タグには終了タグが必要です。

<hmtl> 
 
    <head> 
 
    <style> 
 
    * { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .item { 
 
    position: relative; 
 
    float:left; 
 
    border: 0px solid #333; 
 
    margin: 0%; 
 
    overflow: hidden; 
 
    width: 425px; 
 
    } 
 
    .item img { 
 
    max-width: 100%; 
 
    -moz-transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
    transition: all 1s; 
 
    } 
 
    .item:hover img { 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
    } 
 
    .row-1, .row-2 { 
 
    display: flex; /* This is the fix for the item formatting problem */ 
 
    flex-direction: row; 
 
    } 
 
    @media screen and (max-width: 425px) { 
 
    .row-1, .row-2 { 
 
     display: flex; 
 
     flex-direction: column; 
 
    } 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class=“main”> 
 
    <img src="http://i.imgur.com/PbeUJ56.gif” style="position:absolute; top:0; left:0;" alt=“DESCRIPTION” height=“1280” width=“645”/> 
 
    <img src="http://imgur.com/JBWbug1.png" style="position:absolute; top:0; left:0;" alt=“DESCRITPION” height=“2000” width=“720” alt="" usemap="#Map" /> 
 
    <map name="Map" id="Map"> 
 
     <area alt="" title="" href="" shape="poly" coords="208,42,47,41,41,132,211,132" /> 
 
     <area alt="" title="" href="" shape="poly" coords="467,73,467,98,654,99,654,74" /> 
 
     <area alt="" title="" href=" shape="poly" coords="683,73,685,98,855,97,855,77" /> 
 
     <area alt="" title="" href="" shape="poly" coords="883,71,883,97,986,96,986,77" /> 
 
     <area alt="" title="" href="" shape="poly" coords="1007,69,1007,95,1092,95,1091,79"/> 
 
     <area alt="" title="" href="" shape="poly" coords="1122,71,1122,100,1230,99,1230,71" /> 
 
    </map> 
 
    <div id="zoom"> 
 
     <div class="row-1"> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img" /></a> 
 
     </div> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/zMVcoiJ.png" alt="img" /></a> 
 
     </div> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/aVdSekS.png” alt="img" /></a> 
 
     </div> 
 
     </div> 
 
     <div class='row-2'> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/MKjyo1I.png” alt="img" /></a> 
 
     </div> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/tpYHlOP.png” alt="img" /></a> 
 
     </div> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/kzy9T7h.png” alt="img" /></a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

・ホープ、このことができます：ここでは、作業コードです。ハッピーコーディング。

出典

2016-04-06 05:58:49

最終結果：あなたはそれが（応答）

だから、流体になりたい場合は任意の要素に固定された幅または高さを与えるしないようにしようとすると覚えておくべき重要な事柄のhttps://jsfiddle.net/Varinder/8fmkg4bq/

一つ、I先に行って、画像タグ流体を作るために、マークアップ

で画像タグからwidthとheight属性を削除し、このCSSルールを追加しました：

img { 
    max-width: 100%; 
}

最初の画像（GIF）は背景画像として使用できますか？だから、WEN先と上にオーバーレイする第二の画像（png）を作っ.mainコンテナ

にbackgroundプロパティを追加しましうまく

今PNG画像をオーバーレイし、流体されていること。画像マップ領域が常に流体であると底タイルについてのみ3タイルは行ごとに存在する保証responsive image maps plugin

を用いて固定され、すべての場所の外である - それにwidth: 33%を添加100/3

ホープこれは☮

に役立ちます

出典

2016-04-06 06:04:10 Varinder

このコードをさまざまなウィンドウサイズに拡大するにはどうすればよいですか？

答えて

関連する問題