0

更新:ここでデモンストレーションを行う Plnkr を入手できます: http://plnkr.co/edit/i6ngfaMgSE0XGZq3VuBW?p=preview (ただし、レスポンシブなものが作動しないように、「プレビュー」ウィンドウを広げる必要があります。

そのため、Twitter Bootstrapthumbnailsとthumbnailクラスを使用して画像ギャラリー タイプの効果を生成しようとしていますが、画像をすべて適切に整列させるのに問題があります。

サーバーから取得されるすべてのサムネイルは、200px X 200px の画像に収まるように均一にスケーリングされます。ただし、高さよりも幅が広い (200px X 100px) こともあれば、その逆 (100px X 200px) もあります。私が望むのは、すべての画像を、それらが置かれている行内で垂直方向および水平方向の中央に配置することです。たとえば、次のようになります。

ここに画像の説明を入力

タグがすべて整列するようtestImageに、testImage2とをコンテナー内で下に移動したいと思います。testImage3

HTML は次のとおりです (いくつかの AngularJS バインディングを含む)。

<div class="container" ng-controller="StaticDataManagementCtrl">
  <div class="row">
    <div class="span12">
      <tabset>
        <tab heading="Text" select="loadTextLibrary()">
          <div class="row"></div>
        </tab>
        <tab heading="Images" select="loadImageLibrary()">
          <div class="row-fluid">
            <ul class="thumbnails">
              <li class="span3" ng-repeat="image in staticImages">
                <div class="thumbnail">
                  <img ng-src="/api/static/images/{{image._id}}/thumb">
                  <h3>{{image.name}}</h3>
                  <p>Some sample description</p>
                </div>
              </li>
            </ul>
          </div>
        </tab>
        <tab heading="Health Mark" select="loadHealthMarkLibrary()"></tab>
      </tabset>
    </div>
  </div>
</div>
4

2 に答える 2

1

この答えは役立つはずです。基本的heightにテキストと画像の修正が必要です。Bootstrap には、.img-responsiveスケーリングに役立つ があります。忘れないでくださいoverflow:hidden。

于 2013-12-16T15:24:43.950 に答える