调整图片大小以适应div，水平垂直居中

Question

中有一张图片，我希望这张图片能够自适应div大小，并且水平垂直居中。我需要一种能够在ie >= 8浏览器中使用的解决方案。

- Benjamin Crouzier

Answer 1

这是一种方法：

在这里玩弄：http://jsfiddle.net/4Mvan/1/

HTML：

<div class='container'>
    <a href='#'>
    <img class='resize_fit_center'
      src='http://i.imgur.com/H9lpVkZ.jpg' />
    </a>
</div>

CSS：

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

- Benjamin Crouzier

---

为什么在图像周围加上<a>标签？除了将图像变成链接之外，还有其他原因吗？（这不是问题的一部分。） - Jens

@Jens 你可以直接跳过 <a> 和 </a>，它仍然可以工作。 （这确实不是问题的一部分，只是为了显示您可以将图像设置为链接而不会破坏它） - Benjamin Crouzier

你提出了问题，然后立即回答了它……为什么？ - Saty

@Saty，我正要回答另一个关于将图像居中在 div 中的问题，但是因为我的需求有点不同（缩放到适合大小+水平居中+垂直居中），所以我决定在发布答案之前创建一个新问题。鼓励自问自答。 - Benjamin Crouzier

很遗憾，这个解决方案无法扩大图像：http://jsfiddle.net/4Mvan/438/ - Robert

我的容器具有动态宽度（实际上是整个窗口），因此无法设置固定的“行高”，并且“100％”不起作用。我正在使用JavaScript进行设置，但如果有更好的（CSS）方法，请告诉我;-) - Antoine

Answer 2

仅在 Chrome 44 中进行了测试。

示例：http://codepen.io/hugovk/pen/OVqBoq

HTML：

<div>
<img src="http://lorempixel.com/1600/900/">
</div>

CSS：

<style type="text/css">
img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 100%;
    max-height: 100%;
}
</style>

- Hugo

---

非常感谢，它有效了。还有一个补充，您应该为div设置样式 position: relative。 - hal

我查看了@hugo的解决方案，并采用了类似的方法，这对我的需求非常完美，而且在IE中也可以正常工作。我的解决方案：https://codepen.io/anon/pen/RLPVaq - DavidKahnt

是的，x轴和y轴上的平移非常重要。如果您的图像太大，您可以随时更改最大值。 - J.W

7年后仍然很好。还使用了position: relative。谢谢。 - jfunk

Answer 3

不受 IE 支持

更多信息请查看：Can I Use?

.container {
  overflow: hidden;
  width: 100px;
  height: 100px;
}

.container img {
  object-fit: cover;
  width: 100%;
  min-height: 100%;
}

<div class='container'>
    <img src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>

- TwistedOwl

Answer 4

解决方案

<style>
.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
    background-image: url("http://i.imgur.com/H9lpVkZ.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

}

</style>

<div class='container'>
</div>

<div class='container' style='width:50px;height:100px;line-height:100px'>
</div>

<div class='container' style='width:140px;height:70px;line-height:70px'>
</div>

- Ravi Soni