css - 画像が大きい場合のみストレッチ

Question

私はcssをブラッシュアップしようとしていますが、これがcssのみで可能かどうかを知りたいです:

100x100ピクセル div タグに表示したい画像があるとします。画像がどうなるかわかりませんが、100x100ピクセルよりも小さい場合は、画像を中央に配置したいと考えています。画像が大きい場合は、ウィンドウのサイズに縮小します。

たとえば、それが大きい場合：

それが小さい場合：

これはcssだけで可能ですか？

Answer 1

もちろん、問題ありません。これを試して：

CSS

div {
    display: table-cell;
    vertical-align: middle;
    border:1px solid #999;
    width:100px;
    height:100px;
    text-align:center;
    font-size:0;
}
img {
    max-width:100px;
}

HTML

<div>
    <img src="http://www.placekitten.com/200/200" />
</div>

<div>
    <img src="http://www.placekitten.com/50/50" />
</div>

1 つは 50x50 で、もう 1 つは 200x200 の 2 つの画像を含む jsFiddle の例

Answer 2

これを試して：

CSS

div {
  max-width: 100px;
  max-height: 100px;
}

img {
  width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: solid 1px #000;
}

HTML

<div>
<img src="image source1" alt="enter image description here">
</div>
<br>
<div>
<img src="image source2" alt="enter image description here">
</div>

そしてJSFiddle

上の画像は元は 100px x 100px で、下の画像は元は 75px x 75px です。

編集

おっと、私の CSS がフィドルで逆向きになってしまいました。現在更新中です。