html - 画像のサイズがコンテナーよりも大きい場合、画像を垂直方向と水平方向の中央に配置し、サイズを変更するにはどうすればよいですか

Question

この質問に対する答えを見つけるのに本当に苦労しましたが、このようなものは見つかりませんでした。

私のプロジェクトは、Facebook がライトボックスに画像を表示する方法と同様に、ギャラリーのライトボックス効果を作成することです。可能な限りレスポンシブ対応をお願いしたいです。

画面上の固定位置を保持し、ディスプレイのサイズ (パーセントで表される) に基づいて固定サイズを持つライトボックスがあります。

ライトボックスは、左側 (画像を表示) と右側 (コメントとメタ情報を表示) に分かれています。

これは、さまざまなアスペクト比で機能する必要があります。

画像がライトボックスの固定サイズよりも小さい場合は、垂直方向と水平方向の中央に配置します。

いずれかの画像のサイズがライトボックスの固定サイズよりも大きい場合は、大きい方のサイズをライト ボックスのサイズに設定し、小さい方のサイズを設定してアスペクト比を維持する必要があります。

私が直面している問題は、画像がコンテナの高さを超えることができるということです。

役立つ解決策は非常に高く評価されます。

これは、私がやろうとしているjsfiddleへのリンクです。

http://jsfiddle.net/bawmY/2/実際のコードの簡易版です。

これは、jsfiddle で見たくない場合に備えてあります

<div class=lb>
    <div class=lbLeftSide>
        <div class=lbImageWrapper>
           <div class=lbImageContainer>
              <img class=lbImage src="http://hockinghillscabins-lodges.com/hocking-hills-airtours/hot-air-balloon-1.jpg">
           </div>
        </div>
     </div>
     <div class=lbRightSide>
         Some Content
     </div>
</div>

スタイルシート

.lb{
    position:fixed;
    width:70%;
    height:70%;
    left:10%;
    top:10%;
    border:solid black 1px;
}

.lbLeftSide{
    float:left;
    height:100%;
    width:80%%;
    background-color:green;
}
.lbRightSide{
    float:left;
    height:100%;
    width:20%;
    background-color:red;
}

.lbImageWrapper{
    width:100%;
    height:100%;
    border:solid blue 1px;
    display:table;
}
.lbImageContainer{
    width:100%;
    height:100%;
    border:solid pink 1px;
    display:table-cell;
    vertical-align: middle;
}

.lbImage{
    max-height:100%;
    max-width:100%;
    min-width:0px;
    min-height:0px;
    margin-left:auto;
    margin-right:auto;
    opacity:.7;
}