表中的图像：如何使Firefox像IE一样运行

Question

我有一张固定高度的桌子。 其中有2行具有固定高度，2行包含图像。 这些带图像的细胞应均匀分布在剩余高度上。

Safari，Chrome和IE就像我想要的那样：表高度为500px。 Firefox只是忽略了我的表的修复高度，并以完整的高度显示图像！

如何使Firefox像Internet Explorer一样？

img {object-fit: cover; height: 100%; width: 100%; }

table {  
  height:500px; width:100%; 
  table-layout: fixed; 
}
td.static { height:20px }

<table>
  <tr>
    <td>
      <img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
    </td>
  </tr>
  <tr>
    <td class="static">static height</td>
  </tr>
  <tr>
    <td>
      <img  src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
    </td>
  </tr>
  <tr>
    <td class="static">static height</td>
  </tr>
</table>

Answer 1

这不会破坏Chrome。表格标签上的内联样式

img {object-fit: cover; height: 100%; width: 100%; }

table {  
  height:500px; width:100%; 
  table-layout: fixed; 
}
td.static { height:20px }

<table>
  <tr>
    <td>
      <img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
    </td>
  </tr>
  <tr>
    <td class="static">static height</td>
    <tr>
      <td>
        <img  src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
      </td>
    </tr>
    <tr>
    <td class="static">static height</td>
    </tr>
</table>

Answer 2

如何将图像添加为背景：

＆＃13;

＆＃13;

/*img {object-fit: cover; height: 100%; width: 100%; }
*/
td:not(.static) {
  background-image: url("http://lorempixel.com/output/animals-q-c-300-230-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
table {  
  height:500px; width:100%; 
  table-layout: fixed; 
}
td.static { height:20px }

＆＃13;

<table>
  <tr>
    <td>
      <!--<img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">-->
    </td>
  </tr>
  <tr>
    <td class="static">static height</td>
    <tr>
      <td>
        <!--<img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">-->
      </td>
    </tr>
    <tr>
      <td class="static">static height</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

jsfiddle：jsfiddle.net/L03jppr6

firefox的问题在于它希望父元素定义了一些大小（如果你没有设置它，它被假定为auto，它会扩展），所以只需添加一些{ {1}}：

我建议使用变量，它会使未来的编辑变得更加容易，因为您只需要在一个地方进行更改。

＆＃13;

＆＃13;

height

＆＃13;

img {object-fit: cover; height: 100%; width: 100%; }

:root {
--staticTDs: 2; /* number of static tds */
}

td.static { height:20px }

td:not(.static) {
  height: calc( (500px - var(--staticTDs) * 20px) / var(--staticTDs) );
  /* (tableHeight - numberofTDs * heightofStaticTDs) / numberofTDs */
}

table {  
  height:500px; width:100%; 
  table-layout: fixed; 
}

＆＃13;

＆＃13;

＆＃13;

jsfiddle：jsfiddle.net/L03jppr6/1

或者你可以一路走下去，并为所有元素定义变量。

＆＃13;

＆＃13;

<table>
  <tr>
    <td>
      <img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
    </td>
  </tr>
  <tr>
    <td class="static">static height</td>
    <tr>
      <td>
        <img src="http://lorempixel.com/output/animals-q-c-300-230-1.jpg">
      </td>
    </tr>
    <tr>
      <td class="static">static height</td>
    </tr>
</table>

＆＃13;

img {object-fit: cover; height: 100%; width: 100%; }

:root {
--staticTDs: 2; /* number of static tds */
--staticTDheight: 20px; /* height of static tds */
--tableHeight: 500px; /* height of table */
}

td.static { height: var(--staticTDheight) }

td:not(.static) {
  height: calc( (var(--tableHeight) - var(--staticTDs) * var(--staticTDheight)) / var(--staticTDs) );
  /* (tableHeight - numberofTDs * heightofStaticTDs) / numberofTDs */
}

table {  
  height: var(--tableHeight); width:100%; 
  table-layout: fixed; 
}

＆＃13;

＆＃13;

＆＃13;