我正在尝试解决一个具有挑战性的问题。我有一个网站的标头，将在其中生成三个随机图片。图片的集合非常庞大，因此宽高比因图片而异。
网络的标题实际上是一个具有一行和三个表单元的响应表：
.header table {
width: 94%;
border: 0;
background: transparent;
margin-left: 5%;
margin-right: 5%;
vertical-align: middle;
display: table;
}
现在我想做的是：
保持表格响应（即，如果可能的话，避免使用像素定义宽度和高度，而是使用“％”）=>像这样：
.header td {
display: table-cell;
width: 25%;
height: auto;
text-align: center;
vertical-align: middle;
}
...但是同时，要在表格单元格中放入三张随机图片而不改变表格单元格的大小或长宽比... ...这意味着将裁剪某些图片。
我是用CSS3属性试验包括：
.header td {...
background-repeat: no-repeat;
background-size: contain;
...}
<table class="header">
<tr>
<td class="header" style="background-image:url('img/random1.jpg')">
</td>
<td class="header" style="background-image:url('img/random2.jpg')">
</td>
<td class="header" style="background-image:url('img/random3.jpg')">
</td>
</tr>
</table>
但是这个属性似乎与td标签不友好...
无论如何，我实际上并不是在坚持“表格”解决方案。是否有人围绕以下方法做任何工作：
？
纯CSS解决方案是可取的，但我想可能不可能。
首先，您需要某种宽度和高度的关系，否则您将无法获得响应行为。
所以我做了一些肮脏的黑客^^
我将图像插入每个给出关联的td中，然后以不透明度0隐藏它（在ie8中不起作用）。现在，如果要插入其他内容，则可以使用位置和单独的容器。
HTML：
<table class="header">
<tr>
<td class="header" style="background-image:url('img/1.jpg')">
<img src="img/1.jpg" />
</td>
<td class="header" style="background-image:url('img/2.jpg')">
<img src="img/1.jpg" />
</td>
<td class="header" style="background-image:url('img/3.jpg')">
<img src="img/1.jpg" />
</td>
</tr>
</table>
然后我更改了您的CSS：
table {
width: 94%;
border: 0;
background: transparent;
margin-left: 5%;
margin-right: 5%;
vertical-align: middle;
}
td {
width: 25%;
height: auto;
text-align: center;
vertical-align: middle;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
display: inline-block;
}
td img {
opacity: 0;
width: 100%;
height: auto;
}
看起来有点奇怪，因为我使用表格布局，然后我覆盖了表格显示行为（显示：行内块），但是我缺少一些背景信息，所以我决定使用确切的yout html。
在这里您可以看到结果JS Fiddle
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句