Проблемы с масштабированием изображений в Firefox

Question

Я пытаюсь масштабировать изображения на основе высоты браузера.

Кажется, что он работает в Chrome и Safari, но когда я проверяю его в Firefox, изображения остаются прежними.

Вот код, который у меня есть.

HTML:

<div class="full-width"> 
    <div class="image-wrapper"> 
     <div class="images"> 
      <img src="http://farm8.staticflickr.com/7165/6840151639_b31263de71_b_d.jpg" /> 
      <img src="http://farm8.staticflickr.com/7165/6840151639_b31263de71_b_d.jpg" /> 
     </div> 
    </div> 
</div> 

CSS:

.full-width { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
} 

.image-wrapper { 
    position: absolute; 
    right: 0; 
    width: 50%; 
    height: 55%; 
    margin-right: 15px; 
} 

.images { 
    position: absolute; 
    right: 0; 
} 

.image-wrapper img { 
    display: block; 
    height: auto; 
    max-height: 50%; 
    width: auto\9; /* ie8 */ 
} 

Вы можете просмотреть рабочий пример здесь: http://jsfiddle.net/Pywak/

Answer 1

Все ваши абсолютные брейки позиционирующие вычисления пропорционального размера. У вас уже нет отношений между родителями и детьми.

Answer 2

Предоставление position:absolute; без position:relative; родительскому контейнеру. При изменении размера браузера или изменении разрешения экрана всегда возникает проблема с вами.

Я бы предположил, что вместо img-тегов вы используете их в качестве фоновых изображений, а затем используйте background:contain; || background:cover; Недвижимость.

Answer 3

Я просто работал над тем же вопросом!

Поскольку процент относительно родительского элемента, это ключ, который имеет прямой указатель с явно указанной высотой. Таким образом, .images должен иметь высоту, указанную для того, чтобы ее дети правильно оценивали процент.

Вы также можете увеличить высоту с помощью vh единиц (относительно высоты видового экрана), но тщательно и с резервными функциями, так как vh несовместим со всеми браузерами.