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 Framework,并且在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中图像很大
5 个解决方案
#1
22
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忽略display:table-cell里面的max-width?
#2
16
I also had this problem, the solution for me was "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>
#3
3
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-responsive
so 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" />
#4
0
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();
});
});
#5
-2
My custom css:
我的自定义css:
table .img-responsive {
width: 100%;
}
#1
22
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忽略display:table-cell里面的max-width?
#2
16
I also had this problem, the solution for me was "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>
#3
3
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-responsive
so 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" />
#4
0
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();
});
});
#5
-2
My custom css:
我的自定义css:
table .img-responsive {
width: 100%;
}