web-dev-qa-db-ja.com

Twitter bootstrapサムネイルの高さを設定するにはどうすればよいですか？

個人のウェブサイトのサムネイルモジュールの設定に問題があります。私は自分のプロジェクトにTwitter bootstrap（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 -->
jqueryhtmlcsstwitter-bootstrapthumbnails
27
Ion Ungurean

cssのいずれか：

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

またはインライン：

<img src="img.png" alt="..." style="min-height:50px;height:50px;" />
28
Neil S

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

Div class="row" 追加した 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 としてではありませんが、少なくともより良いものです。

9
Juan Camilo Guarin P

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; }}
2
Rodolfo Jorge Nemer Nogueira