twitter-bootstrap 引导程序中的图像响应以填充列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31176937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image responsive in bootstrap to fill column
提问by Luis Becerril
I have a bootstrap column defined as follows:
我有一个引导列定义如下：
<div class="col-md-4 limit">
<img id="myImage" src="" class="img-responsive"/>
</div>
<style>
.limit {
max-height:500px;
overflow:hidden;
}
</style>
The source of the image is obtained programatically so I do not know in advance the height or width of my image. What I want to do is that the image in this column whose height is limited appear completely inside of the div. With the img-responsiveclass I have achieved the image to horizontally fill my column, however, as this class also sets the height to auto, most of the time this causes the image to overflow and be hidden. I do not want my image to overflow in any way.
图像的来源是通过编程获得的，所以我事先不知道我的图像的高度或宽度。我想要做的是，该列中高度受限的图像完全出现在div内部。通过该img-responsive课程，我已经实现了图像水平填充我的列，但是，由于该课程还将高度设置为自动，大多数情况下这会导致图像溢出并被隐藏。我不希望我的图像以任何方式溢出。
So, lets say that my column measures:
所以，假设我的专栏衡量：
- Width: 300px (defined by bootstrap)
- Height: 500px (.limit)
- 宽度：300px（由引导程序定义）
- 高度：500px (.limit)
And my image dimensions are:
我的图像尺寸是：
- Width: 600px
- Height: 1500px
- 宽度：600px
- 高度：1500px
The current configuration makes the image shrink to 300px x 750px. As its container is set to only 500px, this causes the last 250px to be lost inside the overflow. I would like to image instead to be resized to 200px x 500px in order for it to completely into the containing div
当前配置使图像缩小到 300px x 750px。由于其容器设置为仅 500 像素，这会导致最后 250 像素在溢出中丢失。我想将图像调整为 200px x 500px 以使其完全进入包含的 div
How can I do this? Thanks!
我怎样才能做到这一点？谢谢！
采纳答案by dianne_ldrs
Try this:
试试这个：
<div class="row">
<div class="col-md-4">
<div class="limit">
<img src="images/yourimage.png" alt="" />
</div>
</div>
</div>
<style type="text/css">
.limit{
width: 300px;
height: 500px;
max-height: 500px;
overflow: hidden;
}
.limit img{
width: 100%;
height: 100%;
}
</style>
回答by xtrose Media Studio
Simplest way in Bootstrap 4
Bootstrap 4 中最简单的方法
<div class="row">
<div class="col-md-4">
<img src="images/yourimage.png" alt="" class="w-100" />
</div>
</div>回答by Olivier
You could try to inherit the height or the width of the parent div (as both would not contain proportions). This could only work if you have the same type of img (all portret or landscape). Other solution is to calculate the dimensions based on the max width/height of the img in your program language. Pick the one that matches the condition (both var <= max value). Then echo the solution in your html.
您可以尝试继承父 div 的高度或宽度（因为两者都不包含比例）。这仅在您拥有相同类型的 img（所有 portret 或横向）时才有效。其他解决方案是根据程序语言中 img 的最大宽度/高度计算尺寸。选择符合条件的那个（var <= max value）。然后在您的 html 中回显解决方案。
回答by nithin
@Luis Becerril I normally used this plugin with those type of issues. Please try this. If may suit to your requirement. jQuery Image Center
@Luis Becerril 我通常使用这个插件来解决这些类型的问题。请试试这个。如果可能适合您的要求。jQuery 图像中心
