0

サイトにアイテムを表示する「グリッド ビュー」を設計しました。ただし、完全にレスポンシブであるため、画像を固定幅にすることはできません。これが私が達成しようとしていることです。

  1. 画像は元のサイズを超えて伸びてはいけません
  2. 画像の比率は変更できません
  3. 画像は、クリッピング (overflow:hidden) されているボックスの垂直方向および水平方向の中央に配置する必要があります。

多かれ少なかれ、画像を作成してコンテナを埋めようとしていますが、比率を変更したり伸ばしたりせずにできる場合にのみ、明らかに画像の高さと幅を確認する必要があり、元のサイズですが、私はしませんこれを行う方法を知っていますが、誰でもこれを手伝ってもらえますか?

提供されているフィドルにある現在のグリッド項目の単純なバージョンは次のようになります。

<div class="container">
    <div class="item"><div class="overflow"><img src="/bla.jpg" /></div></div>
</div>

オーバーフローの高さと幅は固定され、画面サイズに応じてのみ変化し、画像が「クリップ」されます。

http://jsfiddle.net/Xzzks/

シャノン

4

1 に答える 1

0

フィドルを更新しました。

http://jsfiddle.net/Xzzks/1/

主な変更点

.gridItem .itemImage img {
    width:auto;
    /*min-width:100%;
    min-height:100%*/
    max-width:100%;
    max-height:100%
}

お役に立てれば。

于 2013-05-07T06:37:59.690 に答える