1

ページにたくさんの画像divsがあります。これらすべての画像を特定のサイズ (サムネイル サイズ) に変更するにはどうすればよいですか? 現在、すべての画像は元の大きなサイズで表示されます。できればCSSを使用して、divsそれらの中の画像タグを変更せずにこれらの画像のサイズを変更する方法はありますか?divs

<div class="ItemLeft">


  <div class="Clipping">        
    <a class="ImageLink" href="/videos/id8" title="galaxy">
      <img class="ItemImage" src="/Images/video8.jpg" alt="video 8" />
      <img class="OverlayIcon" src="/Images/1.png" alt="" />
    </a>
    <a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/id1234"><span class="Text">51:57</span></a>
  </div>

  <div class="Title"><a href="/videos/id8" title="galaxy">galaxy</a></div>

  <div class="VideoAge">1 daybefore</div>

  <div class="PlaysInfo"> broadcast 265</div>

</div>
4

4 に答える 4

1

多分あなたはこのようなものを探しています:

<style type="text/css">
    .ImageLink img {
        width: 50px;
        height: 50px;
    }
</style>
于 2013-03-21T04:20:50.747 に答える
1

CSS ファイルの ImageLink または ItemImage クラスの css を変更するだけです。

このようなもの

.ImageLink{height: 100px; width: 50px}
.ItemImage{height: 100px; width: 50px}

これにより、すべてが同じ高さと幅に設定されます。

于 2013-03-21T04:21:34.530 に答える
1

これを行う最善の方法は、imgタグを の 100% にまたがるようにすることdivです。

CSS

.Clipping {
  width: 300px; //your width
  height: 200px; //your height
  overflow: hidden;
}
.ImageItem {
  width: auto; //or 100%. Auto is to keep aspect ratio
  height: 100%;
}

この方法は、レスポンシブ デザインに柔軟に対応できるため、私が Web サイトで使用しているものです。に px 値を使用する代わりに、div柔軟性のためにパーセントを使用します。

于 2013-03-21T04:33:48.250 に答える
0

最善の方法は、img タグの共通スタイルを維持することです (これはすべての画像に適用されます)。div または span のサイズを設定できます。画像は、div またはスパンのサイズに応じて調整されます。

img {max-width: 100%;height: auto;}
于 2013-03-21T04:51:59.960 に答える