拉伸圖像只有大

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向後的小提琴。現在更新了。