表格中的响应式图像（引导程序 3）

Posted 2023-03-05

【中文标题】表格中的响应式图像（引导程序 3）

【英文标题】：Responsive images in tables (bootstrap 3)

【发布时间】：2013-09-21 17:00:02

【问题描述】：

我正在使用 Bootstrap 3 框架，但遇到了一些问题 Firefox 中的“img-responsive”类。 我有一个 4 列的表格，布局为 15/50/10/25%。 第一列是一张大图，应该缩小到 15%。 但这仅适用于 Chrome/Opera，但不适用于 FF/IE（图像没有响应，因此太大）。

我的代码：

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

这是 BS3 中的一个已知问题吗？我找不到任何东西。

编辑：http://jsfiddle.net/cctyb/ - 在 Chrome 中有效，在 FF 中图像太大

【问题讨论】：

Why do Firefox and Opera ignore max-width inside of display: table-cell?的可能重复

【参考方案1】：

将 .img-responsivewidth:100%; 添加到您的 CSS，另请参阅：Why do Firefox and Opera ignore max-width inside of display: table-cell?

【讨论】：

thx 这行得通...，所以这似乎更像是浏览器问题而不是引导问题？

我不知道。我认为将图像（类 img-responsive）添加到表中没有任何问题，所以我将成为 Bootstrap 的问题。另外我在这里发布了这个问题：github.com/twbs/bootstrap/issues/10690

你可以把这段代码放在@media (min-width: 768px) .img-responsive width: 100% 这样当视口为 xs 时它不会使较小的图像变大

非常感谢，正在尝试使图像在表格内响应。

谢谢！现在 img 是响应式 acordin 表宽度 ;)

【参考方案2】：

我也有这个问题，我的解决方案是“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"    />
</div>
</div>

【讨论】：

添加“table-layout:fixed”是我的最佳答案。谢谢。

【参考方案3】：

巴斯的回答

.img-responsive 
   width:100%;

确实有效，但它也会放大其他图像。

我所做的是创建另一个类

.img-responsive-2  
   width: 100%; 

并将它与原始的.img-responsive 放在一起，这样我就可以灵活地将其仅用于表格中的图像。

<img src="someimage.jpg" class="img-responsive img-responsive-2" />

【参考方案4】：

试试这个代码

$(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】：

我的自定义 CSS：

table .img-responsive 
    width: 100%;

【讨论】：

这与 Bass Jobsen 的回答有何不同？