3

これはブロック グリッドの例からの私のコードです http://foundation.zurb.com/docs/components/block-grid.html

<ul class="small-block-grid-2 my-grid">
  <li><img src="http://static4.businessinsider.com/image/50098bda69beddb65e000008-480/iphone-example-camera-photo.jpg"></li>
  <li><img src="http://foundation.zurb.com/docs/img/demos/demo2.jpg"></li>
  <li><img src="http://foundation.zurb.com/docs/img/demos/demo3.jpg"></li>
  <li><img src="http://foundation.zurb.com/docs/img/demos/demo4.jpg"></li>
</ul>

リンク: http://jsfiddle.net/qhoc/ckMEN/1/

私が対処しようとしている問題は、画像サイズが異なることです。私のバックエンドは、次のようにレイアウトを処理する方法をmin width = x強制します。min height = y

  1. 幅 < 高さの場合: トリミングして高さを中央に揃えます
  2. 幅 > 高さの場合: トリミングして幅を中央に揃えます

liただし、すべての画像は同じサイズでなければなりません。また、ウィンドウ サイズが変更された場合の対処方法を教えてください。

block-grid私が持っている1つの代替手段は、完全に使用することを避け、固定サイズのli. それもまたOKです。したがって、基本的にliは画面サイズに基づいて wxh が変更されます。

しかし、それが機能する場合は、トリックをプレイすることを好みます.

助けてください。ありがとう！

4

2 に答える 2

5

画像を次のように設定することで、要素background-images内の画像のトリミングと配置をより細かく制御できます。<li>

<li>これの欠点の 1 つは、要素の高さを固定する必要があることです。簡単な JavaScript またはメディア クエリでこれを修正できますが。

HTML

<div class="row">
  <div class="small-12 small-centered columns">
    <ul class="small-block-grid-4 large-block-grid-4 my-grid">
      <li>
          <div style="background-image:url(http://static4.businessinsider.com/image/50098bda69beddb65e000008-480/iphone-example-camera-photo.jpg);"></div>
      </li>
      <li>
          <div style="background-image:url(http://foundation.zurb.com/docs/img/demos/demo2.jpg);"></div>
      </li>
      <li>
          <div style="background-image:url(http://foundation.zurb.com/docs/img/demos/demo3.jpg);"></div>
      </li>
      <li>
          <div style="background-image:url(http://foundation.zurb.com/docs/img/demos/demo4.jpg);"></div>
      </li>
    </ul>
  </div>
</div>

CSS

.my-grid li {
    display:block;
    height:150px;
    overflow:hidden;
}

.my-grid li > div {
    height:100%;
    width:100%;
    background-size:cover;
    background-position:center center;
}

編集

<li>幅に基づいて高さを変更するための jQuery を追加しました。

$(document).ready(function(){

    function reheight() {
        $('.my-grid > li').each(function() {
            $(this).height($(this).width() * 0.75);
        });
    }

    reheight();

    $(window).resize(function(){
        reheight();
    });

});

そして、ここに完全な例があります。

于 2013-07-24T23:00:59.337 に答える