28

個人の Web サイトのサムネイル モジュールの設定に問題があります。プロジェクトに Twitter ブートストラップ (3.0) を使用していますが、サムネイル モジュールの設定を完了できません。

幅はいいのですが、サムネイルの高さを設定できません(すべてのサムネイルを同じ高さに揃えることはできません)。

すべてのサムネイルに 1 つの (標準) 高さを設定し、画像を拡大/縮小して中央に表示し、画像を引き延ばさずにすべてのスペースを埋めるにはどうすればよいですか?

<div class="row">
<!-- Thumbnail 0 -->
<div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="img.png" alt="...">
    </a>
    <div class="caption">
        <h4>Arctic MX-2, 8g</h4>
    </div>
</div><!-- /thumbnail 0 -->
<!-- Thumbnail 1 -->
<div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="blue.png" alt="...">
    </a>
    <div class="caption">
        <h4>Arctic MX-2, 8g</h4>
    </div>
</div><!-- /thumbnail 1 -->
</div><!-- /thumbnail -->
4

3 に答える 3

29

CSSのいずれか:

.thumbnail img { min-height:50px; height:50px; } // or whatever height you desire

またはインライン:

<img src="img.png" alt="..." style="min-height:50px;height:50px;" />
于 2013-08-27T21:41:13.297 に答える
8

ねえ、私はあなたの質問を見ていました. Bootstrap で同じ問題が発生したため、 の高さの 1 つが<div>他の高さよりも高い場合、グリッドが適切に表示されません。サムネイルの配置の問題を修正する方法を見つけました。多くの人が CSS Flex プロパティを使用していると思います。

class="row"追加した divにstyle="display:flex; flex-wrap: wrap;". 基本的に、私のコードは次のようになります。

<div class="row" style="display:flex; flex-wrap: wrap;">
  <div class="col-sm-3">
    <div class="thumbnail">
      <img src="http://lorempixel.com/500/300" style="width:200px">
      <div class="caption">
        <h4>Some thumbnail heading</h4>
      </div>
    </div>
  </div>  
  <div class="col-sm-3">
    <div class="thumbnail">
      <img src="http://lorempixel.com/500/300" style="width:200px">
      <div class="caption">
        <h4>Some thumbnail heading</h4>
      </div>
    </div>
  </div>
  .. any number of thumbnails you want
</div>

したがって、さまざまなサムネイルの高さを設定でき、適切に表示されます。おそらくjQuery Masonryとしてではありませんが、少なくとも改善されます。

于 2014-11-21T22:13:59.790 に答える
2

SCSS を使用すると、次のことが簡単にできます。

@media (min-width: $screen-sm-min) {.thumbnail img { height:100px; }}
@media (min-width: $screen-md-min) {.thumbnail img { height:150px; }}
@media (min-width: $screen-lg-min) {.thumbnail img { height:200px; }}
于 2014-07-30T01:14:06.580 に答える