RequestFullscreen в Chrome: изображение остается маленьким

Ответ 1

Элемент фигуры имеет стиль width: 30%. Это вызывает проблему в Chrome.

В соответствии с MDN в разделе "Различия в презентации":

Здесь стоит отметить ключевое различие между Gecko и WebKit в настоящее время: Gecko автоматически добавляет правила CSS для элемент растянуть его, чтобы заполнить экран: "ширина: 100%, высота: 100%". WebKit этого не делает, вместо этого он центрирует полноэкранный режим элемент с одинаковым размером на экране, который в противном случае является черным. Получить такое же полноэкранное поведение в WebKit, вам нужно добавить свой собственный "ширина: 100%, высота: 100%"; CSS правила для элемента:

#myvideo: -webkit-full-screen {width: 100%; высота: 100%; }

С другой стороны, если вы пытаетесь эмулировать поведение WebKit на Гекко, вам нужно разместить элемент, который вы хотите представить внутри другой элемент, который вы будете делать в полноэкранном режиме, и используйте CSS правила для настройки внутреннего элемента в соответствии с желаемым внешним видом.

Мне удалось добавить предлагаемый css с помощью инструментов разработчика Chrome к белой картинке, которую вы связали в комментариях, и она показала правильный размер. Тем не менее, у него действительно была белая коробка (которая, как представляется, исходит от элемента рисунка).

Я бы постарался изменить ваш javascript, поскольку @AdamFischer предлагает сделать изображение в полноэкранном режиме вместо тега рисунка и добавить соответствующий css. Если это не вариант, вы можете применить css к элементу фигуры, а затем при необходимости отрегулировать, чтобы получить нужный вам вид. (Обратите внимание, что это webkit specific css, поэтому он не должен мешать другим браузерам.) У меня также был некоторый успех, обертывающий фигуру в другом элементе (например, span или div) и применяя полноэкранный css к этому и удаляя width:30% от рисунка.

Ответ 2

Для главного div укажите стили

#maindiv:-webkit-full-screen {   min-width: 100%;   min-height: 100%; }

предоставить одинаковые стили для изображения tag.try, изменив свойства min-width и height на ширину и высоту.

Ответ 3

Выбранный элемент после onclick событие - это не изображение, а метка рисунка.

Просто обновите свой код javascript до:

$('img').on('click', function(e) {
    e.preventDefault;

    var elem = this;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    } else {
        alert("Sorry, your browser is too old and doesn't support fullscreen :-(")
    }
});

http://fiddle.jshell.net/xnyj9wr5/2.

(Полноэкранный режим не будет работать внутри кадра, так что вот ссылка для результата http://fiddle.jshell.net/xnyj9wr5/2/show/)

Обратите внимание, что requestFullscreen() устарел при ненадежном происхождении, и поддержка будет удалена в будущем. Вы должны рассмотреть возможность переключения приложения на безопасное происхождение, например HTTPS. Подробнее см. https://goo.gl/rStTGz.

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

Изменить: На вашем веб-сайте примера http://blogs.sitepointstatic.com/examples/tech/full-screen/index2.html

max-width: 100%;

- проблема. Удалите это правило и измените размер изображения по желанию. При необходимости вы должны попробовать удалить это правило с помощью js после запуска события клика. Или привяжите его к событию requestfullscreen.

Ответ 4

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

.fullscreenOnClick:-webkit-full-screen img {
    display: block;
    margin: 0 auto;
}