Question

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

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

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

因为这个原因，我已经睡了差不多2天了。我对此不了解。

这是样本图片：

请帮帮我

EDIT1：

你好，你能检查我的HTML吗...它应该是完美的对齐，但是图片的大小不同，对齐方式已经破坏了......看看这个.. http://codepen.io/anon/pen/MaorKq

EDIT2

已经是但是当图像的宽度越高时点击此处：http://codepen.io/anon/pen/EVXMee

Answer 1

这是你要找的吗？

我已经制作了一个纯粹的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

祝你好运！

Answer 2

使用下面的CSS，JS和HTML标记来实现这个目标：

<style>
    .img-container {
        width: 400px;
      height: 400px;
      background-color: black;
      position:relative;
    }
    .img-container img {   
      position:absolute;
      top: 50%;
      left: 50%;      
    }    
  </style>
  <script>
    $(document).ready(function() {
      debugger;
      var img = $('.img-container img');
      img.css('margin-top', - ($('.img-container img').height() / 2) +         'px');
      img.css('margin-left', - ($('.img-container img').width() / 2) + 'px');         
    });
  </script>

<div class="img-container">
    <img src="http://www.gstatic.com/webp/gallery/1.jpg" class="img-responsive" />   
</div>

Answer 3

您的div为400 * 400，但您的图片很小，当您使用img-responsive时，这意味着img max-size : 100 %。但在这里你想看到min-size:100%。

您可以尝试以下代码

<img src="image.png" class="img-responsive  full-width" /> <!--add class full-width-->

在你的css文件中

.full-width{
 width:100%; 
}

Answer 4

以下是@ Himechi90所写内容的精简版。

如果您只需要一个图像而不是一行，基本上您只需要：

＆＃13;

.image-full-view {
  float: none;
  padding: 0;
  background: #000;
  display: table;
  width: 100%;
  height: 100%;
}

.image-full-view img {
  display: block;
  max-height: 80vh;
  max-width: 100%;
  margin: auto;
}

＆＃13;

<div class="image-full-view">
  <img src="https://media.usfcvast.org/images/cvast-arches/projects/la_mancha/la_motilla_del_azuer/la_motilla_del_azuer_aerial.jpg" alt="" />
</div>

＆＃13;

Answer 5

您可以使用object-fit: contain;

CSS：

.image-container {
    overflow: hidden;
    height: 16rem;
    background-color: black;
    width: auto;
}

.image-item {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

html：

<div class="image-container">
    <img class="image-item" src="images/Screenshot(1).jpg">
</div>

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

5 个答案: