[解決済み] バウンディングボックスに合わせて画像を拡大縮小する

質問

画像をバウンディングボックスに拡大縮小するためのCSSのみの解決策はありますか（アスペクト比を維持する）？これは、画像がコンテナよりも大きい場合に動作します。

img {
  max-width: 100%;
  max-height: 100%;
}

例

• ユースケース1（作品）。 http://jsfiddle.net/Jp5AQ/2/
• ユースケース2（作品）。 http://jsfiddle.net/Jp5AQ/3/

しかし、ある寸法がコンテナの100%になるまで画像を拡大したいのです。

• 使用例3（うまくいかない）。 http://jsfiddle.net/Jp5AQ/4/

どのように解決するのですか？

注：これは認められた答えであるにもかかわらず。 以下の回答 はより正確で、背景画像を使用するオプションがある場合は、現在すべてのブラウザでサポートされています。

編集2：現代では object-fit を使うのがより良い解決策かもしれません。 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

いいえ、両方向でこれを行うためのCSSのみの方法はありません。あなたが追加することができます

.fillwidth {
    min-width: 100%;
    height: auto;
}

ある要素の幅を常に100%にし、高さをアスペクト比に合わせて自動的に拡大縮小する。 または はその逆。

.fillheight {
    min-height: 100%; 
    width: auto;
}

を使えば、常に最大高さと相対幅に拡大することができます。この両方を行うには、縦横比がコンテナより大きいか小さいかを判断する必要があり、CSSではこれを行うことはできません。

なぜなら、CSSはページがどのようなものかを知らないからです。CSS は事前にルールを設定しますが、要素がレンダリングされ、どのようなサイズと比率を扱っているかが正確にわかるのはそのあとです。それを検知するためには、JavaScriptを使うしかないのです。

あなたはJSの解決策を探しているわけではありませんが、誰かがそれを必要とするかもしれないので、私はとにかく1つを追加します。JavaScript でこれを処理する最も簡単な方法は、比率の違いに基づいてクラスを追加することです。ボックスの幅と高さの比率が画像のそれよりも大きい場合、クラス "fillwidth"を追加し、そうでない場合はクラス "fillheight"を追加します。

$('div').each(function() {
  var fillClass = ($(this).height() > $(this).width()) 
    ? 'fillheight'
    : 'fillwidth';
  $(this).find('img').addClass(fillClass);
});

.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>