在沒有拉伸的情況下適合div內的圖像

Question

我需要在300x300 div內適合圖像而不拉伸圖像。我已經看到了這個在一怒之下後，此頁面上的滑塊：

http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html

的圖像被剪切而不是拉伸。 而不是使用最大寬度，最大高度。

我該怎麼做？

Answer 1

您鏈接到網站上的這些圖像的實際大小，所以答案很簡單，只是爲了調整圖像大小。

你不能真正做到這一點沒有「拉伸」的圖像如果圖像恰好是小於300像素寬或高，但你可以做到這一點不改變的比例，這是我想你的意思。

這裏的基本思想是：

<div><img></div> 

如果你想使用300像素的最小寬度（你期望需要更大的小圖像），試試這個：

div { 
    width:300px; 
    height:300px;  
    overflow:hidden; 
} 
div img { 
    min-width:100%; 
} 

演示：http://jsfiddle.net/Z47JT/

如果你要裁剪圖像（因爲你期望的那樣大），但不擴大它們，試試這個：

div { 
    width:300px; 
    height:300px;  
    overflow:hidden; 
    position:relative; 
} 
div img { 
    position:absolute; 
} 

演示：http://jsfiddle.net/Z47JT/1/

如果你想結合這兩種技術。

另一種方法是在容器上簡單地使用background-image，但調整大小（如果要拉伸較小的圖像）將很困難，除非您使用不完全支持的background-size。否則，這是一個非常簡單的解決方案。

Answer 2

使用柔性一體化解決方案

下面是HTML，

<div><img /></div> 

樣式添加

div{ 
    width:100%; 
    height:250px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    overflow:hidden 
} 
div img{ 
    flex-shrink:0; 
    -webkit-flex-shrink: 0; 
    max-width:70%; 
    max-height:90%; 
}