Проблемы с полосами прокрутки при изменении размера при попытке подогнать изображение к экрану без искажений - PullRequest
Новая
       32

Проблемы с полосами прокрутки при изменении размера при попытке подогнать изображение к экрану без искажений

0 голосов
/ 25 июля 2011

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

Центрирование Horzontal, о котором заботятся в css, но мне пришлось использовать JavaScript для вертикального центрирования.

Мои вопросы:

  1. Есть ли лучший способ сделать что-либо из этого (например, все в CSS)?
  2. При первой загрузке, если изображение (до его масштабирования) шире, чем область просмотра, присутствует полоса прокрутки, в то время как мой скрипт вычисляет высоту области просмотра. Это означает, что когда мой скрипт помещает div и img в окно, внизу появляется белый пробел, то есть высота полосы прокрутки. Я могу обойти это, указав переполнение: скрытый, но это выглядит как обходной путь. Есть ли способ лучше? Будет ли переключение изображения лучше?
  3. Когда я изменяю размеры так, чтобы div был шире, чем изображение, я получаю белый раздел под черным div, который создает вертикальную полосу прокрутки. Опять же, я могу избавиться от этого с помощью переполнения: скрытого, но мне не нравится такой подход. Я хочу знать, почему он там и как от него избавиться?
  4. Иногда я могу заставить горизонтальную полосу прокрутки появляться и, когда я изменяю размер, она мигает вкл / выкл. переполнение: скрытое исправляет это, но я хочу более чистое решение.
  5. Существуют ли более эффективные способы кодирования этого кода или можно оптимизировать мой jQuery / Javascript?

Ответы [ 4 ]

1 голос
/ 25 июля 2012

Я не знаю ни одного кроссбраузерного решения в чистом html / css для выполнения того, что вы просили. Любой элемент с соотношением сторон и шириной жидкости вызовет «состояние гонки», когда браузер решит показать / скрыть полосу прокрутки. Браузер заставит полосу прокрутки, когда обнаружит эту ситуацию с элементами под его контролем. Это также может быть смоделировано с помощью JavaScript. Я также столкнулся с этой проблемой и создал небольшую библиотеку:

https://github.com/ocbnet/layout

Существует также демонстрационная версия, которая реализует то, о чем просил ОП:

http://www.ocbnet.ch/github/layout/demo/fullscreen.html

0 голосов
/ 25 июля 2011
  1. Да (для части высоты 100%): html,body,div {height:100%}
  2. переполнение: скрытое мне кажется приятным. Другие возможные решения:
    1. <script>document.write('<img src="..." width="'+window.width()+'" [...] /> (однако следует избегать использования document.write)
    2. <img src="" width="1" height="1" /> (т.е. определить небольшой размер по умолчанию -> нет полосы прокрутки)
    3. @ Предложение Гербена: css max-width (лучше всего)
  3. Кажется, что это место, которое займет горизонтальная полоса прокрутки. Я получаю эту проблему только при определенном соотношении размера и размера.
  4. Это когда отношение PictureRatio равно или довольно близко к FullDivRatio. Я не могу найти ху с переполнением: скрыто.
  5. Понятия не имею, кажется, ИМО достаточно хорош.

Так что да, странная полоса прокрутки при изменении размера происходит из-за эффекта границы, полоса прокрутки появляется при переключении с if на else или наоборот.

С этим jsFiddle Я никогда не получаю горизонтальную полосу прокрутки, но время от времени я все еще получаю вертикальную.

0 голосов
/ 25 июля 2011

Вы можете сделать это: 

<div>
    <img id="photo" src="">
</div>

div {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
position: relative;
}

Это все чистый HTML и CSS.Альтернатива ответу Джозефа об использовании таблицы, если вы не хотите использовать таблицу в своей структуре.

0 голосов
/ 25 июля 2011

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

РЕДАКТИРОВАТЬ:

Хорошо, поэтому первое, что я бы посоветовал, - это позволить браузеру пропорционально изменить размеры.Вам не нужно изменять размер div, только изображение.Вы также можете позволить браузеру определить вертикальное выравнивание, что гораздо лучше, чем его вычисление.Это можно сделать, поместив содержимое в одну ячейку таблицы.Пример кода ниже - это чистый HTML и CSS.Вы можете добавить что-то такое, что вам уже нужно переключать высоту и ширину изображения между 100% автоматически и автоматически 100% в зависимости от высоты изображения и высоты окна.Надеюсь, это немного приблизит вас к цели. 

<table style="background-color:#ddd; width:100%; height:100%">
  <tr>
    <td align="center">
      <div id="fulldiv">
        <img style="width:100%" id="photo" src="http://assets.perfectlytimedphotos.com/hashed_silo_content/silo_content/21003/resized/coke.jpg">
      </div>
    </td>
  </tr>
</table>
...