拉伸图像只有大

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的

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像素100像素，底部是原本960x75像素960x75像素。

编辑

哎呀，有我的CSS向后的小提琴。现在更新了。