отзывчивая таблица css с несколькими масштабируемыми изображениями в нескольких рядах

Question

Моя цель - превратить нарезанное изображение в интерактивное изображение. Я пошел с css-таблицами, потому что у меня есть 4 строки изображений, каждая строка с различным количеством изображений (фрагментов), и каждое изображение будет иметь разную ширину, такую ​​же высоту внутри строк.

Основные строительные работы в Safari, но не в Firefox. Я понимаю, что таблицы css не работают с «элементами блока», и я потратил бесчисленные часы, прежде чем пытаться использовать стандартные divs.

Я бы хотел, чтобы вся страница масштабировалась, однако я не могу найти правильный путь чтобы справиться с этим. у меня есть версия, которая работает хорошо, как фиксированный размер, но я просто не могу показаться, чтобы сделать его жидкость.

Любые мысли будут приветствоваться и оценены.

Вот мой 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> 

Answer 1

Для чего вы используете свойство float? Я также не понимаю, почему вы определяете высоту. Если вы хотите масштабировать изображения, если таблица становится меньше, дайте им ширину 100%.