在多行中具有多个可缩放图像的响应式 css 表答案

【问题标题】：responsive css table with multiple scalable images in multiple rows在多行中具有多个可缩放图像的响应式 css 表
【发布时间】：2014-01-04 00:53:18
【问题描述】：

我的目标是将切片图像变成交互式图像。我使用 css 表是因为我有 4 行图像，每行具有不同数量的图像（切片），并且每个图像的宽度不同，行内的高度相同。

基本构造在 Safari 中有效，但在 Firefox 中无效。我知道 css 表不适用于“块元素”，在尝试使用标准 div 之前，我已经花费了无数个小时。

我想扩展整个页面，但是我似乎找不到正确的方法来处理这个问题。我有一个固定尺寸的版本，但我似乎无法让它变成液体。

欢迎和赞赏任何想法。

这是我的 CSS。

.container {
max-width: 871px;
width:100%; 
}

.tb {
display: table;
width: 100%;
margin: 0 auto;
background-color: #FFF;
}

.tbr {
display: table-row;
width:100%;
}

.tbc {
display: table-cell;
vertical-align: top;
}

.tb img {
float:left;
}

.content {
padding: 0px 0;
}

.row1 {
width:100%;
max-height:227px;
float:left;
}

.row2 {
width:100%;
float:left;
max-height:145px;
}

.row3 {
    width:100%;
float:left;
max-height:118px;
}

.row4 {
width:100%;
float:left;
max-height:145px;
}

...和html

<div class=" container">
<div class="tb">
<div class="tbr">
<div class="tbc row1"><img src="images/house_01.png"></div></div>

<div class="tbr row2" >
<div class="tbc"><img src="images/house_02.jpg"></div>
<div class="tbc"><img src="images/house_03.jpg"></div>

<div class="tbc"><img src="images/heat_01.png"/></div>
<div class="tbc"><img src="images/house_05.jpg"/></div></div>

<div class="tbr row3" >
<div class="tbc"><img src="images/house_06.jpg"></div>
<div class="tbc"><img src="images/house_07.jpg"></div>
<div class="tbc"><img src="images/house_08.jpg"/></div>
<div class="tbc"><img src="images/house_09.jpg"/></div>
<div class="tbc"><img src="images/house_10.jpg"/></div>
<div class="tbc"><img src="images/heat_02.png" /></div>
<div class="tbc"><img src="images/house_11.jpg"/></div>
<div class="tbc"><img src="images/house_12.jpg"/></div>
<div class="tbc"><img src="images/house_13.jpg"/></div></div>

<div class="tbr row4">
<div class="tbc"><img src="images/house_14.jpg"></div>
<div class="tbc"><img src="images/house_15.jpg"></div>
<div class="tbc"><img src="images/house_16.jpg"/></div>
<div class="tbc"><img src="images/house_17.jpg"/></div>
<div class="tbc"><img src="images/house_18.jpg"></div>
</div>

<div class="tbr">
<div class="tbc"><img src="images/house_19.jpg" style="float:left"></div></div></div>

【问题讨论】：

或者换一种说法，我如何创建一个可缩放的 div，其中包含一行中的多个图像，它将随着浏览器窗口缩放而不是换行。一行 5 张图片 > 较小的浏览器窗口 = 一行 5 张图片（缩小）

标签： css image html-table scalable

【解决方案1】：

你用 float 属性做什么？我也不明白你为什么要定义一个高度。如果您想在表格变小时缩放图像，请将它们的宽度设置为 100%。

【讨论】：