Изменить размер DIV пропорционально в области просмотра

Question

Изменить размер DIV пропорционально в области просмотра

0

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

В настоящее время у меня CSS: width: 100%; высота: авто; но проблема заключается в том, что высота выходит за пределы высоты окна просмотра, когда браузер становится шире. Я хочу убедиться, что он всегда виден - независимо от того, пейзаж или пейзаж.

Я предполагаю, что мне нужно немного JS или JQuery, но это то, о чем я не знаю, как это сделать.

Может ли кто-нибудь помочь?

Заранее спасибо!

Энди

user3441155 20 март 2014, в 10:45

Источник

0

сделайте скрипку или предоставьте скриншот пожалуйста
suraj rawat 20 март 2014, в 08:54

Теги:

javascript

jquery

html

css

viewport

1 ответ

Ещё вопросы

сделайте скрипку или предоставьте скриншот пожалуйста

Jamie Barker · Answer 1 · 2014-03-20T06-27-00.000Z

0

function ResizeContent() {
   $('MyElement').css('height', $(window).outerHeight() + 'px');
   // or
   $('MyElement').outerHeight($(window).outerHeight());
}

$(window).resize(function () {
   ResizeContent();
});
ResizeContent();

Должен сделать трюк...

ОБНОВИТЬ:

function ResizeContent() {
       $('MyElement').css('max-height', $(window).outerHeight() + 'px');
       $('MyElement').css('max-width', $(window).outerWidth() + 'px');
}

Рабочий пример

Jamie Barker 20 март 2014, в 06:27

0

Спасибо за это - но он не изменяется пропорционально - он просто изменяет размеры до полного видимого окна просмотра.
user3441155 21 март 2014, в 12:39
0

Обновил мой ответ на основе этой новой информации. Причина, по которой он не будет пропорциональным, состоит в том, что у вас все еще есть width:100%; Я догадываюсь?
Jamie Barker 21 март 2014, в 15:28
0

Хорошо. Но как мне установить ширину?
user3441155 25 март 2014, в 21:44
0

Вы действительно смотрели на пример JSFiddle?
Jamie Barker 26 март 2014, в 08:28
0

Я сделал да - но у него фиксированная ширина пикселя - возможно, я не объяснил свою проблему, но мне нужно, чтобы div и его содержимое пропорционально масштабировались при изменении размера браузера.
user3441155 27 март 2014, в 07:45
0

То, что вы говорите, не имеет смысла. «Это имеет фиксированную ширину пикселя» и width: 100%; боюсь, не ходите вместе;) Мое предложение означает, что оно не будет выходить за границы окна браузера, независимо от его размера. Если вы посмотрите на мой рабочий пример и измените высоту и ширину элемента "#window", вы увидите, что произойдет в каждом случае. Если вы добавите display:table-cell;vertical-align:middle; к окну, он также будет центрировать его вертикально :)
Jamie Barker 27 март 2014, в 08:51
0

Спасибо за это - но я имею в виду, что ваша скрипка имеет фиксированную ширину в пикселях - поэтому в CSS она изменяется только вручную. Что мне нужно для пропорционального изменения размера изображения при изменении размера окна браузера - имеет ли это смысл?
user3441155 28 март 2014, в 16:47

Показать ещё 5 комментариев