適應圖像容器尺寸

Question

我有一個網頁，其中我在thumbview顯示大量的圖像，因此我對所有的拇指所定義的尺寸：

然後，在加載的圖像容器可以更高或更寬，所以我希望它能正確顯示。例如：如果該圖像是高則應該顯示中心：

然後，如果該圖像是寬，它應該是：

目前圖像被填充整個容器，所以其中一些沒有按預期顯示，有些正在擴展，另一些則太寬。提前致謝！

Answer 1

這將有助於

flex-box解決方案

div { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 1px solid; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
}

<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=150%C3%97300&w=150&h=300"></span></div> 
 
<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=550%C3%97200&w=550&h=200"></span></div>

display:inline-block解決方案

div { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 1px solid; 
 
    text-align: center; 
 
} 
 
div:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
}

<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=150%C3%97300&w=150&h=300"></span></div> 
 
<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=550%C3%97200&w=550&h=200"></span></div>

Answer 2

如果你可以設置圖片爲背景，在CSS中你可以使用：

background-size: contain; 

這個簡單的規則會照顧一切。