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>

带有两张图片的jsFiddle 示例，一张 50x50，另一张 200x200

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

顶部图像最初是 100 像素 x 100 像素，底部图像最初是 75 像素 x 75 像素。

编辑

糟糕，我的 CSS 倒退了。现在更新了。