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

StackOverflow https://stackoverflow.com/questions/6818096

Вопрос

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

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

Мои вопросы:

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

Решение

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

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

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

<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>

Другие советы

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

https://github.com/ocbnet/layout

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

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

  1. Да (для части высоты 100%): html,body,div {height:100%}
  2. Overflow: Скрытый мне кажется хорошим. Другие возможные решения:
    1. <script>document.write('<img src="..." width="'+window.width()+'" [...] /> (Document.Write следует избегать, однако)
    2. <img src="" width="1" height="1" /> (т.е. определить небольшой размер по умолчанию -> без прокрутки)
    3. @Gerben Предложение: CSS-максимальная ширина (лучшее)
  3. Кажется, это пространство, которое займет горизонтальная прокрутка. Я также получаю эту проблему только в определенном соотношении размера+.
  4. Это когда Pictureratio равна или довольно близко к Fulldivratio. Я не могу найти Hoo с переполнением: скрыто.
  5. Не знаю, кажется достаточно хорошим IMO.

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

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

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

<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. Альтернатива ответу Джозефа об использовании таблицы, если вы не хотите использовать таблицу в своей структуре.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top