图片最大宽度在Firefox中不起作用 [英] Image max-width not working in Firefox

问题描述

在这里，我使用的是最新的bootstrap v3.2.0

当我调用 display：table-cell; 在div块中的CSS。因此，在Firefox中，div块的内部图像不会工作 max-width：100％; CSS。它在其他浏览器中工作正常。

$ b 演示： http://jsfiddle.net/Q7742/2/embedded/result/

这是我的HTML

 < div class =container> 
< div class =table-container> 
< div class =col-table-cell col-lg-4>< img src =// farm1.staticflickr.com/22/28331349_fd0fbadbbd_z.jpg?zz=1\">< ; / DIV> 
< div class =col-table-cell col-lg-5> B< / div> 
< div class =col-table-cell col-lg-3> C< / div> 
< / div> 
< / div> 
  

CSS

  .col-table-cell.col-lg-5 {
 background：#ddffdd; 
} 
 .col-table-cell.col-lg-3 {
 background：#ffffdd; 
} 
 
 img {
 display：block; 
 height：auto; 
最大宽度：100％; 
 
 
 @media（min-width：1200px）{
 .table-container {
 display：table; 
宽度：100％; 
} 
 
 .table-container .col-table-cell {
 display：table-cell; 
 vertical-align：middle; 
 float：none; 
 
 
 $ / code $ / pre 
 
解决方案
表需要修复它在firefox中工作：
 
 
 
更新小提琴： 
 
 
  http://jsfiddle.net/Q7742/6/embedded/result/  
  @media（min-width：1200px）{
 .table-container {
 display：table; 
 table-layout：fixed; 
宽度：100％; 
} 
 
 .table-container .col-table-cell {
 display：table-cell; 
 vertical-align：middle; 
 float：none; 
} 
} 
  
 
Here, I am using latest bootstrap v3.2.0


When I have call display: table-cell; CSS in div block. So, Will not work max-width: 100%; CSS for inside image of it div block in Firefox. It is working fine in Other browser.

Demo: http://jsfiddle.net/Q7742/2/embedded/result/

Here is my HTML
<div class="container">
<div class="table-container">
<div class="col-table-cell col-lg-4"><img src="//farm1.staticflickr.com/22/28331349_fd0fbadbbd_z.jpg?zz=1"></div>
<div class="col-table-cell col-lg-5">B</div>
<div class="col-table-cell col-lg-3">C</div>
</div>
</div>
CSS
.col-table-cell.col-lg-5 {
    background: #ddffdd;
}
.col-table-cell.col-lg-3 {
    background: #ffffdd;
}

img {
    display: block;
    height: auto;
    max-width: 100%;    
}

@media (min-width: 1200px) {
.table-container {
        display: table;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}

解决方案
Your table needs to be fixed for it to work in firefox:

Updated Fiddle:

http://jsfiddle.net/Q7742/6/embedded/result/
@media (min-width: 1200px) {
    .table-container {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}


                        
这篇关于图片最大宽度在Firefox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！