Элементы перекрытия Safari/Chrome, которые установлены с помощью встроенного блока

Question

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

Для этого я использую встроенный блок отображения с выравниванием по центру, чтобы добиться эффекта. IT отлично работает на FF, но когда я открываю Safari или Chrome при изменении размера, divs начинают перекрываться. Я создал этот jsfiddle, чтобы показать пример моего dom. Мне нужно, чтобы pageOne и pageTwo делились встроенным блоком, потому что позже я абсолютно позиционирую ссылки поверх изображений страниц.

Что мне не хватает?

Чтобы увидеть эту проблему, вам нужно открыть jsFiddle в safari/chrome и сделать панель результатов больше, чем значение по умолчанию. Начните с браузера около 1/2 его нормальной ширины/высоты. Когда вы запустите jsFiddle, увеличьте свой браузер и обратите внимание, как два изображения начинают перекрываться. Если вы откроете его в FF, они не будут перекрываться.

http://jsfiddle.net/X9NNh/1

я смог приблизиться к эффекту я хочу во всех браузерах с этим с помощью таблиц:

http://jsfiddle.net/x82uK/

Answer 1

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

Хотя это сделает вашу работу более трудной (прочтите: требуйте Javascript), когда дело касается абсолютно позиционирующих ссылок на изображениях, here's an alternative approach, используя background-size: contain.

HTML:

<div id="issue"> 
    <div id="leftPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div> 
    <div id="rightPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div> 
</div> 

CSS:

html, body { 
    height: 100%; 
    background: #666; 
} 
#issue { 
    position: absolute; 
    top: 20px; bottom: 20px; 
    left: 20px; right: 20px; 
    border: 1px solid grey; 
    box-sizing: border-box; 
    background: #EEE; 
} 
.page { 
    position: absolute; 
    top: 30px; bottom: 30px; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 
#leftPage { 
    background-position: center right; 
    left: 30px; right: 50%; 
} 
#rightPage { 
    background-position: center left; 
    left: 50%; right: 30px; 
}