loading...
имеем div class=”slide” высотой и шириной с окно браузера. Каждый такой div — это слайд, их будет много, расположенных вертикально, то есть будет 100км вертикального скролла.
В каждом div находится еще один div class=”imagecontainer”, в котором будет картинка.
можно ли только с помощью css сделать так, чтобы:
1. Картинка всегда занимала 80% от высоты окна браузера (высоты div class=”slide”), но не больше 90% ширины. То есть если картинка слишком широкая, то высота картинки может быть меньше 80%. Естественно, aspect ration сохраняем.
(этого я добился. Но все работает только, если высота изначальной картинки больше чем max-height, в противном случае, на высоких разрешениях, картинка не увеличивается. Если же я ставлю height 80%, то aspect ratio ломается)
2. Div с картинкой был горизонтально и вертикально в центре экрана (без использования table) Это я не знаю как сделать, что только не перепробовал. В интернетах есть пара решений этого вопроса но на моей модели они не работают.
IE 8+, Firefox, Opera, Chrome, Safari
может быть кто-нибудь сможет откорректировать мой код, чтобы все работало?
Inside html и css
html
http://pastie.org/5704593
css
http://pastie.org/5704599
спасибо, это уже прогресс для меня, а есть возможность сохранить img или только через background image получится?
сохранять пропорции по двум направлениям (портрет и горизонтально) наверное не получится без js
ок, то что я сделал работает, пока картинка не превышает max-height. Допустим, я просто буду для ретины подгружать другую картинку. А вот второй вопрос: как положить div imagecontainer в div slide чтобы он был в центре экрана?
ну ты гений просто! все классно, только эти два примера, которые ты сделал, они плохо работают на IE8. Там, где background-image – картинка урезается, если уменьшать окно браузера. А второй пример – вообще не работает. Что там пофиксить для IE?
transform с 9й версии только. Попробуй так.http://d.pr/n/keMc+ Ие нету проверить. Но когда-то так делали под ие6+
пиши простой скрипт, тк без размеров четких а пикселях в ие8 не отцентровать фотку тебе.
знаете, я решил, наверное забью на IE. Вменяемые люди все равно его не используют. К тому же в IE9 это будет работать, как я понял… спасибо, я бы, наверное, несколько дней сидел в поисках решения.
не, ты просто более упрощенный лэйаут для ие8 и ниже сделай и все