「最大サイズ」の画像を縮小する

Question

max-widthとmax-heightを100％に設定すると、意図したとおりに画像が拡大され、縦横比がそのままのコンテナに収まるように拡大縮小されます。しかし、私は同じことを達成する必要がありますが、余分な容器を画像の周りにしっかりと固定してください（画像に対して他のものを置くことができるように）。

私は非JSソリューションを探していますが、マークアップのセマンティクスはアプリのための問題ではありません。 （テーブルは大丈夫でしょう）。また、画像の大きさは既知と考えることができる。

私が欲しいものを記述するための別の方法：画像は常に体内に収まるようと（画像自体に枠を置くの自明な解を使用していない）、その周囲に境界線を表示

ここではfiddle見せています問題。黄色のコンテナを見せるために、画像に0.5の不透明度を付けました。目的は、コンテナをイメージと常に同じサイズにすることです。つまり画像には常に黄色の色合いがありますが、他の黄色の部分は表示されません。注：色の効果を達成しようとしているわけではありません。問題の図解に過ぎません。

Answer 1

、このいずれかを試してみてください、http://jsfiddle.net/xmarcos/K4dHr/

アップデート：ここでhttp://jsfiddle.net/xmarcos/K4dHr/4/

Answer 2

、これは動作しているようです：http://jsfiddle.net/Wexcode/vzc4m/1/

あなたはあなたの<div>それなぜなら周りの最大の高さを持っている必要はありませんdisplay: inline-blockと設定すると、内側の要素の寸法に伸びます。 <img>を強制的にdisplay: blockにすることで、指定しない限り、マージンを使用してコンテナ内の要素の周りに余分なスペースが追加されないようになります。