在没有拉伸的情况下适合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%; 
}