0

この文法ページには、上部に590px X 183pxのメイン画像があり、下部に5つの121px X 137px画像があり、互いに水平に並んでいます。

サイズ変更およびトリミングされた画像を含むページ

下の画像は、上のメイン画像のサイズを変更したものです。スクリーンショットの例では、下部の3番目の画像は、上部のバスの画像のサイズ変更された切り抜きです。最初の一番下の画像（本）をクリックすると、本が一番上の画像でもあるページに移動します（上のバスのように）。

この長いがうまくいけば明確な紹介はすべて、下部の画像を上部の画像のサイズ変更された切り抜きとして水平方向に整列させるにはどうすればよいかを尋ねることです。 これで、下の画像がオフラインでトリミングおよびサイズ変更され、新しいファイルとしてアップロードされました。したがって、下の画像からリンクされている5つのページすべてにアクセスするには、10個の画像ファイルをダウンロードする必要があります。しかし、サイズ変更とトリミングができれば（そして画像を水平方向に揃えることができれば）、それらはたった5つのファイルになります。サイズ変更とトリミングを行うために、マージン左（および高さ）を試しました。

<img style="height:135px; margin-left:-290px;" src="http://www.imparare-inglese.it/uploads/1/1/1/6/11169156/7674785.png"/>
<img style="height:135px; margin-left:-610px;" src="http://www.imparare-inglese.it/uploads/1/1/1/6/11169156/6647450.png"/>

しかし、2番目の画像にマージン左を設定したのと同じように、2番目の画像が最初の画像の上に表示されます。どうすればそれを防ぐことができますか？私は何が欠けていますか？

テーブルの例：http：//jsfiddle.net/EZnAg/

4

2 に答える 2

0

トリミングされた画像は、実際には、アスペクト比が異なる（元の画像から）新しく作成された画像です。これらの画像が完全に異なる画像であると仮定すると（そして、width = "smallpx" height = smallpx "として表示されている同じ画像ではない）、uは次のようなdiv内にそれらを配置できます。

<div id="all_image contained" style="width: 300px;">
  <div style="width: 100px; float:left">
      <img src="images/img1.jpg" width="80px" height="50px"/>
  </div>
  <div style="width: 100px; float:left">
      <img src="images/img2.jpg" width="80px" height="50px"/>
  </div>
  <div style="width: 100px; float:left">
      <img src="images/img3.jpg" width="80px" height="50px"/>
  </div>
</div>

トリミングするには、jqueryスクリプトを使用して、アスペクト比とサイズが小さい新しい画像を作成する必要があります。

または、同じ大きな画像を小さなサムネイルサイズで表示したい場合は、固定サイズのdivを使用して、オーバーフローを非表示に設定できます。

于 2013-02-13T08:17:35.057 に答える
0

画像をdiv内に配置し、画像を含むdivに幅、高さ、float：left、position：relative、overflow：hiddenを適用してから、必要に応じて画像を絶対位置にします。画像にfaux/cssサイズ変更が必要な場合は、cssにも適用します。

* {
        padding:0;
        margin:0;
    }
    .panels {
        float:left;
    }
    .placeholder {
        width:200px;
        height:200px;
        float:left;
        overflow:hidden;
        margin:0 20px 0 0;
    }
    .placeholder img {
        /*width:100%;*/
    }


<div class="panels">
    <div class="placeholder">
        <img src="http://www.jakss.co.uk/common/images/shell/header/client-logo.png" />
    </div>
    <div class="placeholder">
        <img src="http://www.jakss.co.uk/common/images/shell/header/client-logo.png" />
    </div>
    <div class="placeholder">
        <img src="http://www.jakss.co.uk/common/images/shell/header/client-logo.png" />
    </div>
</div>

http://jsfiddle.net/seemly/PmUzY/

幅を元に戻す場合：100％; 私のjsfiddleの.placeholderimgで、うまくいけば、これはあなたが望む効果を提供しますか、または少なくともあなたに有利なスタートを与えますか？

于 2013-02-13T09:23:02.203 に答える