0

最新の解像度にサイズ変更できる HTML ページを作成しようとしています。すべての div コンテナーに % を使用しており、適切にスケーリングされていますが、これらのコンテナーに画像があり、同じサイズのままです。

画像の縦横比を失いたくないのですが、コンテナーに収まるようにサイズを変更する必要があります。私の例は 4:3 の比率の画面では問題なく動作しますが、ワイドスクリーンでは画像が途切れます。私が使用している画像は、幅 213px x 高さ 300px です。解決するためにjsを使用する必要がある場合は、それで問題ありません。

<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;">
   <div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div>

   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
</div>
4

6 に答える 6

1

HTML の縦横比の維持に関する投稿があると思います。これを試してみてください。

HTML:

<div id="container">                      <!--base wrapper-->
    <div id="vertical"></div>             <!--flexible vertical component-->
    <div id="ratioElement">content</div>  <!--fit to wrapper element-->
</div>

CSS:

#container{
    position:relative;
    width:100%;
    float:left;
}

#vertical{
    margin-top:50%;     /* 2:1 ratio (#container width : #vertical height) */
}

#ratioElement{          
    position:absolute;  /*this would be the <img>*/
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#069;
}
于 2012-05-15T04:48:42.953 に答える
0

これをチェックして

<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;">
  <div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
</div>
于 2012-05-15T07:17:41.380 に答える
0

最初の行から高さを削除します....

于 2012-05-15T07:43:49.217 に答える
0

JQuery Resiable を使用できます: JQuery UI Resizable

$(selector).resizable(...);

複数の例があります。

于 2012-05-15T05:26:52.043 に答える
0

私はこれを自分で解決することができました。コンテナ div に高さと幅を指定し、その下にある他のすべての div と画像は高さのみを取得します。これにより、画面サイズが動的になり、display:-moz-inline-block を使用して取得する必要がありましたコンテナ div の中央に配置する画像。http://jsfiddle.net/mb5T4/2/を確認して、結果画面のサイズを一般的な比率 (4:3、5:4、16:9) に変更し、すべての画像のサイズを div で変更します。

于 2012-05-16T04:44:42.473 に答える
0

if you want to use 1 image in a row then you should code like below.

<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;">
  <div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
</div>
于 2012-05-15T04:51:32.107 に答える