Html 表格中的响应式图像（引导程序 3）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18846744/
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
Responsive images in tables (bootstrap 3)
提问by Sonic750
I'm using the Bootstrap 3 Framework and have some troubles with the "img-responsive" class in Firefox. I have a 4 column-Table with 15/50/10/25% layout. In the first column is an large-image, which should be scaled down to the 15%. But this only works in Chrome/Opera, but not in FF/IE (the images are not responsive and therefore too big).
我正在使用 Bootstrap 3 框架并且在 Firefox 中的“img-responsive”类有一些问题。我有一个 4 列表格，布局为 15/50/10/25%。第一列是大图，应该缩小到 15%。但这仅适用于 Chrome/Opera，而不适用于 FF/IE（图像没有响应，因此太大）。
My code:
我的代码：
<table class="table table-striped table-condensed voc_list ">
<thead>
<tr>
<th style="width:15%;"></th>
<th style="width:50%;">Bezeichnung</th>
<th style="width:10%;">Zeitraum</th>
<th style="width:25%;">Ort</th>
</tr>
</thead>
<tbody>
<tr class="listview">
<td style="padding:15px 0px 15px 0px;">
<a href="xy" title="">
<img src="yx.jpg" class="img-responsive voc_list_preview_img" alt="" title=""></a>
</td>
<td style="width: 50%; padding:15px 15px 15px 15px;">
<a href="xy" title="">
<h3 class="nomargin_top">ABC</h3>
</a>
</td>
<td style="width:10%;">
555
</td>
<td>
XYZ
</td>
</tbody>
</table>
Is this a known problem in BS3? I couldn't find anything.
这是 BS3 中的已知问题吗？我找不到任何东西。
Edit: http://jsfiddle.net/cctyb/- in Chrome it works, in FF the image is to big
编辑：http: //jsfiddle.net/cctyb/- 在 Chrome 中它可以工作，在 FF 中图像太大
回答by Bass Jobsen
add .img-responsive{width:100%;}to your css, see also: Why do Firefox and Opera ignore max-width inside of display: table-cell?
添加.img-responsive{width:100%;}到您的 css，另请参阅：为什么 Firefox 和 Opera 忽略显示中的最大宽度：表格单元格？
回答by Dieter Casier
I also had this problem, the solution for me was "table-layout fixed"
我也有这个问题，我的解决方案是“table-layout fixed”
.table-container {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.table-cell-container {
text-align: left;
display: table-cell;
vertical-align: middle;
&.center{
text-align: center;
}
img{
display: inline-block;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
}
}
<div class="table-container">
<div class="table-cell-container center">
<img src="myimage.jpg" width="100" height="100" alt="myimage" />
</div>
</div>
回答by malnosna
The answer from Bass
巴斯的回答
.img-responsive {
width:100%;
}
does work, but it also scales up other images.
确实有效，但它也会放大其他图像。
What I have done instead is create another class as
我所做的是创建另一个类作为
.img-responsive-2 {
width: 100%;
}
and put it together with the original .img-responsiveso that I have the flexibility to use it only for images in tables.
并将其与原件放在一起，.img-responsive以便我可以灵活地仅将其用于表格中的图像。
<img src="someimage.jpg" class="img-responsive img-responsive-2" />
回答by user3648328
Try this code
试试这个代码
$(window).load(function() {
$('img.img-responsive').each(function(){
// Remember image size
var imgWidth = $(this).width();
// hide image
$(this).hide();
// if container width < image width, we add width:100% for image
if ( $(this).parent().width() < imgWidth ) { $(this).css('width', '100%'); }
// show image
$(this).show();
});
});
回答by yourepo
My custom css:
我的自定义 css：
table .img-responsive {
width: 100%;
}
