在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

该bfred-IT /对象配合图像填充工具都非常好,我在IE11上Browserstack测试:演示.

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