画像の幅と高さは固定されていますが、カットされる高さは

Question

です。vk.comでは画像の幅は固定されていますが、高さも固定されていますが、画像は中央のようにカットされています。画像へのパスを表示し、カットされていないものだけを表示します。

私はこの写真が

これがどのように行われるか

を理解することがより簡単にできるようにしますか？

Answer 1

これらの容器の高さは固定されており、overflow:hiddenが設定されています。

HTML：

<ul> 
<li><img src="//lorempixel.com/100/100/"></li> 
<li><img src="//lorempixel.com/100/200/"></li> 
<li><img src="//lorempixel.com/100/300/"></li> 
<li><img src="//lorempixel.com/100/400/"></li> 
</ul>​ 

CSS：

li { float:left; height:100px; overflow:hidden; margin:10px; } 

デモ：jsfiddle.net/tbedf

Answer 2

イメージが固定の高さを持っているコンテナのdivに入れることができ、コンテナdivを012に設定します。これは、コンテナより大きい子オブジェクトを切り取ります。クリッピングは表示時のみであり、画像自体は変更されません。

このデモで非表示と表示の間でオーバーフロー設定を切り替えることができるdivを含む画像の例を見ることができます：http://jsfiddle.net/jfriend00/npzjn/。