在单元格(firefox)中缩放图像(使用CSS)后，表行保持原始高度

Question

我有一个简单的HTML表，其中一列包含图像。我用

放大它们

style="zoom: 31%; -moz-transform: scale(0.31); -moz-transform-origin: 0 0;"

例如，在Chrome中，它工作得很好。表看起来和预期的一样。然而，在firefox中，表格行保持其原始高度——就好像没有应用缩放一样。

CSS不是我的主要专业知识，所以它可能是一个简单的问题。我尝试将所有可能的值应用于表行"高度"。属性，但没有任何影响。

Answer 1

我假设列的大小已经在下面的例子中定义了:

解决方案1-background-imageon parent

这个解决方案是如果你没有访问HTML。它简单地把background-image-的性质用在td-元素上，使background-image覆盖td-元素的整个空间。您可以根据自己的喜好调整background-position: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

td {
/* Fixed sizing for demo */
width: 200px;
height: 200px;
}
table,
td {
overflow: hidden;
}
td.bg-img {
background-image: url('http://via.placeholder.com/640x360');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

<h1>Solution 1</h1>
<table>
<tr style="background-color: red">
<td></td>
<td class="bg-img"></td>
<td></td>
</tr>
</table>

解决方案2-background-imageon child

此解决方案与上面的解决方案类似，但将background-image附加到td-元素的另一个子元素上。width: 100%;+height: 100%;允许子元素取其父元素的完整大小。然后应用transform: scale(1.31);，元素将被放大(31%)，并且将overflow: hidden;应用于td和table，图像的缩放效果是可见的，并且没有溢出预。

td {
/* Fixed sizing for demo */
width: 200px;
height: 200px;
}
table,
td {
overflow: hidden;
}
.img-child {
width: 100%;
height: 100%;
background-image: url("http://via.placeholder.com/640x360");
background-position: center;
background-size: cover;
transform: scale(1.31);
}

<h1>Solution 2</h1>
<table>
<tr style="background-color: red">
<td></td>
<td class="img">
<div class="img-child"></div>
</td>
<td></td>
</tr>
</table>

解决方案

3-img-element

如果您可以访问HTML或者如果您关心语义值，则此解决方案使用img-元素。与上面的相似，但使用object-fit+object-position而不是background。您还可以根据自己的喜好调整object-position: https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

td {
/* Fixed sizing for demo */
width: 200px;
height: 200px;
}
table,
td {
overflow: hidden;
}

/* Solution 3 */
.img-src {
display: flex;
}
.img-src img {
max-width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transform: scale(1.31);
}

<h1>Solution 3</h1>
<table>
<tr style="background-color: red">
<td></td>
<td class="img-src"><img src="http://via.placeholder.com/640x360"></td>
<td></td>
</tr>
</table>