auto-height div и изображение CSS

Question

У меня есть набор изображений неизвестной высоты. Код для каждого выглядит следующим образом:

Код:

<div class="x"> 
    <div class="a"><img src="foto.png" /></div> 
    <div class="b"></div> 
</div> 

Я попытался с помощью display: block для изображения и height: auto для класса x. Я не знаю почему, но я получаю ожидаемое поведение в Firefox, но не Opera 19.

В Firefox я получаю нормальные квадраты с изображениями с произвольной высотой - один под одним, в зависимости от высоты изображения. В Opera я получаю только прямоугольник (ы), и все, что я вижу, - это верх изображения, а остальная часть его усечена.

Как это сделать, чтобы оно работало во всех браузерах?

CSS

.x 
{ 
    min-height: 200px; 
} 
.a img 
{ 
    display: block; 
} 
.b 
{ 
    display: none; 
} 

Answer 1

Добавление overflow: hidden; или поплавок в .x. И .a, должны соответствовать высоте .x и .a до высоты изображения, если вы не указали высоту для .x или .a.

Answer 2

Проблема была в использовании масонства. Извините, что я не упоминал об этом. Решение, которое я нашел до сих пор: jquery masonry breaks(stacks images) in chrome/safari but only on first load