在div中包含图像？

Question

我想将图像包含在250 x 250 div中，迫使图像调整大小但不拉伸。我怎样才能做到这一点？顺便说一句，图像通常会比div本身更大，这就是调整大小的原因。

<div id = "container">
  <img src = "whatever" />
</div>

#container { width:250px; height:250px; border:1px solid #000; }

这是一个有人可以编辑的jsfiddle：

http://jsfiddle.net/rV77g/

Answer 1

使用最大宽度和最大高度。它将保持纵横比

#container img 
{
 max-width: 250px;
 max-height: 250px;
}

http://jsfiddle.net/rV77g/

Answer 2

object-fit，表现得像background-size，解决了上下缩放图像以适应的问题。

object-fit CSS属性指定如何将替换元素的内容拟合到由其使用的高度和宽度建立的框中。

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

---

Browser Support

没有IE支持，Edge中的支持从v16开始，仅适用于img元素：https://caniuse.com/#search=object-fit

bfred-it/object-fit-images polyfill在IE11中非常适合我，在Browserstack上测试：demo。

---

Alternative without polyfill using an image in SVG

对于Edge pre v16和ie9，ie10，ie11：

您可以使用CSS object-fit和object-position裁剪和缩放任何图像。但是，这些属性仅在最新版本的MS Edge以及所有其他现代浏览器中受支持。

如果您需要在Internet Explorer中裁剪和缩放图像并向IE9提供支持，您可以通过将图像包装在一个图像中，然后使用viewBox和preserveAspectRatio属性来执行object-fit和object-position所做的操作。

http://www.sarasoueidan.com/blog/svg-object-fit/#summary-recap

（作者彻底解释了这项技术，在这里复制细节是不切实际的。）

Answer 3

你必须像这样设计图像

#container img{width:100%;}

和隐藏溢出的容器：

#container{width:250px; height:250px; overflow:hidden; border:1px solid #000;} 

Answer 4

这是我写的javascript这样做的。

function ImageTile(parentdiv, imagediv) {
imagediv.style.position = 'absolute';

function load(image) {
    //
    // Reset to auto so that when the load happens it resizes to fit our image and that
    // way we can tell what size our image is. If we don't do that then it uses the last used
    // values to auto-size our image and we don't know what the actual size of the image is.
    //
    imagediv.style.height = "auto";
    imagediv.style.width = "auto";
    imagediv.style.top = 0;
    imagediv.style.left = 0;

    imagediv.src = image;
}

//bind load event (need to wait for it to finish loading the image)
imagediv.onload = function() {
    var vpWidth = parentdiv.clientWidth;
    var vpHeight = parentdiv.clientHeight;
    var imgWidth = this.clientWidth;
    var imgHeight = this.clientHeight;

    if (imgHeight > imgWidth) {
        this.style.height = vpHeight + 'px';
        var width = ((imgWidth/imgHeight) * vpHeight);
        this.style.width = width + 'px';
        this.style.left = ((vpWidth - width)/2) + 'px';
    } else {
        this.style.width = vpWidth + 'px';
        var height = ((imgHeight/imgWidth) * vpWidth);
        this.style.height = height + 'px';
        this.style.top = ((vpHeight - height)/2) + 'px';
    }
};

return {
    "load": load
};

}

并使用它只是做这样的事情：

 var tile1 = ImageTile(document.documentElement, document.getElementById("tile1"));
 tile1.load(url);

我用它作幻灯片，其中我有两个这样的“瓷砖”，我淡出一个，另一个淡入。装载是在“瓷砖”上完成的，这是不可见的，以避免重置的震动视觉效果风格回到“自动”。

Answer 5

由于你不想拉伸（所有其他答案都忽略了），你可以像我的jsFiddle edit一样设置max-width和max-height。

#container img {
    max-height: 250px;
    max-width: 250px;
} 

查看我的示例，图像不是正方形，不会伸​​展

Answer 6

  <div id ="container">
    <img src = "http://animalia-life.com/data_images/duck/duck9.jpg"/>

#container img {
        max-width:250px;
        max-height:250px;
        width: 250px;
        height: 250px;
        border:1px solid #000;
    }

img将失去纵横比

Answer 7

#container img{
 height:100%;
 width:100%;   
}