在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;
}

---

浏览器支持

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

在IE11中，bfred-it/object-fit-images polyfill对我很有效，在Browserstack上进行了测试：demo。

---

使用SVG中的图像

时不使用polyfill的替代方法

对于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);

我用它来制作幻灯片，其中我有两个“瓷砖”，我将一个淡出，另一个淡入淡出。加载是在“瓷砖”上完成的，这是不可见的，以避免产生刺耳的视觉影响。将样式重置为“auto”。

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;
    }

The img will lose aspect ratio

Answer 7

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