html - 调整图像大小以占据整个

Question

如何限制容器中的图像，使整个容器充满尽可能多的图像？

例如(我不知道图像的大小，这只是一个例子)- 如果我有一个 100x100 的图像容器和一个 600x400 的图像，则需要满足以下条件。

• 图片应以 150x100 显示
• 图像应该在容器中居中
• 应该隐藏图像的溢出部分(本例中左右各 25 像素)。

请注意 - 有些图像的高度会大于宽度，因此任何解决方案都需要处理所有尺寸的图像，水平和垂直居中.

遗憾的是，任何解决方案也必须与 IE9 兼容(因为这是我正在处理的内部网所有者使用的浏览器)，因此 HTML5/CSS3 解决方案将无法工作。

这里有几个视觉示例-

我尝试过各种 CSS 样式 -

• 如果我嵌套<img>在 <div> 里面容器然后图像
• 如果我绝对将 <img>在 <div>那么如果它的宽度大于高度(即 600x400)，我就无法将它垂直居中。

如有任何建议，我们将不胜感激。

Answer 1

既然你提到它必须与 IE9 一起工作:background-size: cover 就可以做到这一点。您不能将图像本身用作 img 元素，而必须将其作为背景图像分配给容器。

我为你做了一个 jsfiddle here