html - オーバーフロー: 非表示を使用して画像を垂直方向に中央揃えしてトリミングするにはどうすればよいですか?

Question

画像を拡大または縮小せずに、事前設定された画像のサムを表示しようとしています。私のHTMLは次のようになります。

<div class="container">
    <img src="photo.jpg" alt="Test Photo" class="clipped" />
</div>

私のCSS：

.container{
    height: 75px;
    width: 75px; 
    overflow: hidden;
}

.container img.clipped {
    width: 100%; 
}

以下のように、75 x 75 ピクセルのコンテナに画像の中心が表示されると予想されます。つまり、垂直方向に中央揃えされます。

私が見逃しているものはありますか？

Answer 1

画像はボックスの左上隅からサイズ変更を開始するため、下部のみが切り取られます。

画像を背景に移動すると、その結果を得ることができます。

デモ-警告: IE8 では動作しません

HTML:

<div class="container"></div>​

CSS:

.container{
    height: 75px;
    width: 75px; 
    overflow: hidden;
    background:url(photo.jpg) left center no-repeat;
    background-size:75px auto; /* or background-size:100% auto; */
}​

---

このメソッドを複数のコンテナに適用するには、次の 2 つのクラスに分割できます。

.container {
    height: 75px;
    width: 75px; 
    overflow: hidden;
}​

.myPic {
    background:url(photo.jpg) left center no-repeat;
    background-size:75px auto; /* or background-size:100% auto; */
}

次に、次のことができます。

<div class="container myPic"></div>​
<div class="container2 myPic"></div>​
<div class="container myPic2"></div>​
<div class="container2 myPic2"></div>​

...等々。

または、背景画像をインライン スタイルで設定できます。

.container {
    /* same stuff */
    background-position: left center;
    background-repeat: no-repeat;
    background-size:75px auto; /* or background-size:100% auto; */
}

と

<div class="container" style="background-image:url(photo.jpg);">
<div class="container" style="background-image:url(photo2.jpg);">

Answer 2

私は純粋な css ソリューションを持っていません。サイズに関係なく、HTML に合理的に単純なものがあるかどうかはわかりませんが、javascript を使用してこれを行うことができます ( jQuery を使用しない場合はバニラに適応します) :

$('.container').each(function(){
    var $img = $(this).find('img');
    $(this).scrollTop(($img.height()-$(this).height())/2);
    $(this).scrollLeft(($img.width()-$(this).width())/2);
});​

デモンストレーション

Answer 3

.container {
  line-height: 73px;
}
.container img.clipped {
  vertical-align:middle;
}