css - 仅在较大时拉伸(stretch)图像

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 example 有两张图片，一张 50x50，另一张 200x200