在div内部适合图像而不拉伸

Question

我需要在300x300 div内部放置图像而不拉伸图像.我在这个页面上的滑块上看到了这个:

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

图像被剪裁但未拉伸.而不是使用max-width,max-height.

我该怎么做呢？

Answer 1

您链接到的网站上的图像是实际尺寸,因此简单的答案就是调整图像大小.

如果图像恰好小于300px宽或高,你不能在没有"拉伸"图像的情况下真正做到这一点,但你可以在不改变比率的情况下做到这一点,这就是我认为你的意思.

这是基本的想法:

<div><img></div>

如果你想使用300px作为最小宽度(你希望小图像需要更大),试试这个:

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

简单的方法来做到这一点......

.div {
background-image: url(../images/your-image.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat;

}

Answer 3

使用弹性盒解决方案

这是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%;
}