Twitter Bootstrap 3.0响应式IMG高度问题
Twitter Bootstrap 3.0响应式IMG高度问题
提问于 2013-11-21 13:48:21
我正在Twitter Bootstrap 3中构建一个快速的HTML原型，但遇到了一个响应图像高度的小问题。
我定义了三列，每列中有一个图像。我将图像设置为响应式，并修改了默认引导程序中每列之间的填充。我的问题是，中间列中的图像比其左侧和右侧列中的图像略大。这是我的问题的一个快速屏幕截图：http://d.pr/i/z5AS
如何修复以使每列中的所有三个图像具有相同的高度？
HTML：
<div class="container">
<div class="row">
<div class="col-sm-4 item-left">
<img class="img-responsive" src="img/twitter-android.jpg">
</div>
<div class="col-sm-4 item-center">
<img class="img-responsive" src="img/twitter-android.jpg">
</div>
<div class="col-sm-4 item-right">
<img class="img-responsive" src="img/twitter-android.jpg">
</div>
</div>
</div>CSS：
img {
max-width: 100%;
height: auto;
margin: 0;
}
.item-left {
padding-right: 1px;
}
.item-center {
padding: 0 1px;
}
.item-right {
padding-left: 1px;
}在这方面的任何帮助都将不胜感激！
Stack Overflow用户
发布于 2015-12-23 20:39:55
因为Image将根据col sm4宽度调整大小。您还可以在左列上使用padding:15px；padding:1px。右填充:15px；左填充:右列1px。在这两种情况下，图像将被压缩/调整大小，因为提供了填充
但在中间的图像中。从左到右，你只给出了1px的填充。请注意，与其他图像相比，图像将被压缩/调整大小较少。
因此，如果您希望图像大小等于，则必须在3个图像上从左侧和右侧给出相等的填充。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20113460
复制相关文章
相似问题
腾讯云开发者
