GD Star Rating
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

размер 369x500, 10.70 kb

Tagged with →  

11 Responses to Image resize & vertical align

  1. Ssumo:

    спасибо, это уже прогресс для меня, а есть возможность сохранить img или только через background image получится?

  2. D05re:

    сохранять пропорции по двум направлениям (портрет и горизонтально) наверное не получится без js

  3. Ssumo:

    ок, то что я сделал работает, пока картинка не превышает max-height. Допустим, я просто буду для ретины подгружать другую картинку. А вот второй вопрос: как положить div imagecontainer в div slide чтобы он был в центре экрана?

  4. Ssumo:

    ну ты гений просто! все классно, только эти два примера, которые ты сделал, они плохо работают на IE8. Там, где background-image – картинка урезается, если уменьшать окно браузера. А второй пример – вообще не работает. Что там пофиксить для IE?

  5. Ail00:

    transform с 9й версии только. Попробуй так. http://d.pr/n/keMc+ Ие нету проверить. Но когда-то так делали под ие6+

  6. D05re:

    пиши простой скрипт, тк без размеров четких а пикселях в ие8 не отцентровать фотку тебе.

  7. Ssumo:

    знаете, я решил, наверное забью на IE. Вменяемые люди все равно его не используют. К тому же в IE9 это будет работать, как я понял… спасибо, я бы, наверное, несколько дней сидел в поисках решения.

  8. D05re:

    не, ты просто более упрощенный лэйаут для ие8 и ниже сделай и все

Добавить комментарий