如何在图像上添加黑条并且必须保持图像比例 [英] How to add blackbars on image and must stay on image ratio

问题描述

如何在我的 div 上添加 400x400 div 大小的黑条.

how to add the black bars on my div with 400x400 div size.

如果图片是纵向的，它会在左右添加黑条，当图片为宽屏时，会在顶部和底部添加黑条.

if the picture is portrait, it would add black bars on left and right, and when the picture is widescreen the black bars will be added on top and bottom.

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

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

I have no sleep for almost 2 days because of this. I don't understand on this.

因为这个，我几乎两天没有睡觉.我不明白这一点.

这是示例图片:

请帮帮我

编辑 1:

你好，你能检查一下我的 html...它应该是完美对齐的，但图片有不同的大小对齐损坏...看看这个...在这里查看:http://codepen.io/anon/pen/EVXMee

It's already but when the width higher the image pass through check here: http://codepen.io/anon/pen/EVXMee

推荐答案

这是您要找的吗?

我已经制作了一个纯 CSS 解决方案，它应该适用于 IE8.:)此外，它应该适用于任何宽度/高度.

I've made a pure CSS solution that should work up to IE8. :) Also, it should work with any width/height.

.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

祝你好运！

这篇关于如何在图像上添加黑条并且必须保持图像比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！