css - 如何在图像上添加黑条并且必须保持图像比例

如何在尺寸为400x400的div上添加黑条。

如果图片是人像，则会在左侧和右侧添加黑条，
当图片为宽屏时，黑条将被添加到顶部和底部。

<div>
    <img src="image.png" class="img-responsive" />
</div>

因此，我近两天都没有睡眠。
我不明白这一点。

这是示例图片：



请帮我

编辑1：

您好，您能检查我的html吗？应该是完美对齐，但是图片的对齐大小不同。

编辑2

已经，但是当宽度更大时，图像通过
http://codepen.io/anon/pen/MaorKq
在这里检查：

最佳答案

这是您要找的东西吗？

我已经制作了一个纯CSS解决方案，应该可以在IE8上使用。 :)
另外，它应可在任何宽度/高度下工作。

.image-background {
  background: #000;
  display: table;
  width: 100%;
  height: 100%;
  position: relative;
}

.image-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
}

img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  margin: auto;
}

http://codepen.io/anon/pen/vNZJwe

祝好运！