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

如何在400x400 div尺寸的div上添加黑条。如何在图像上添加黑条，并且必须保持图像比例

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

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

因为这个，我已经有两天没有睡了。我不明白这一点。

这是样品图片：

请帮我

EDIT1：

你好，你可以检查我的HTML ...它应该是完美对齐，但图片有不同的大小对齐破...看看这个.. http://codepen.io/anon/pen/MaorKq

EDIT2

它已经但当宽度越高，图像通过检查这里：http://codepen.io/anon/pen/EVXMee

来源

2015-10-08 Storm Spirit

CSS不能检测图像是否是纵向还是横向，但你可以JS找到（宽度和高度），向图像添加一个类，然后使用CSS。 –

你知道如何解决它吗？只需添加黑条，以适应400x400股利，而不是延长 –

这是你在找什么？

我做了一个纯粹的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

祝你好运！

来源

2015-10-08 22:13:20 Himechi90

你好，你能检查我的html ...它应该是完美的对齐，但图片有不同的尺寸对齐破坏...看看这个.. http://codepen.io/anon/pen/MororKq –

你只需要将所有的img-container元素包裹在另一个div中，这样图像就会正确对齐。看到这个更新的codepen：http://codepen.io/Himechi90/pen/wKepzr – Himechi90

是的，它是在其他工作，但其他人有高宽度将无法正常工作...像这个示例.. http：//i.imgur。 com/PG1UYo6.png –

以下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>

来源

2015-10-08 07:37:30 snaren

你好..如果我的股利实际上不是400x400，那么它实际上取决于自举反应...... –

它可以适用于任何高度和宽度。 – snaren

你的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%; 
}

来源

2015-10-08 07:53:54

下面是@ Himechi90写的简明版本。

如果你只需要而不是行的一个图像，基本上所有你需要的是：

.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; 
 
}

<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>

来源

2017-01-18 17:54:48 VME

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

回答

相关问题