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

Я использую jQuery, но я честно не уверен на 100%, это полностью проблема jQuery.

Плагин для галереи/слайдера, но это тоже, вероятно, не имеет значения. Я упоминаю об этом, если кому-то будет интересно.

Здесь идет... У меня есть изображение и выбираю высоту и ширину, это ширина, которая должна быть reset для полноэкранного просмотра. Я хочу поддерживать соотношение сторон, поэтому при изменении размера ширины высота изображения становится больше высоты экрана. Это здорово. Это то, что я хочу. Общий охват. Но здесь, где это становится немного грязным.

Я делаю еще один расчет и выясняю, что избыточная высота (высота img - высота кроссовера) равна X. Поэтому я установил margin-top img: - (X/2). Другими словами, изображение будет центрироваться вертикально, при этом равные биты теперь будут обрезаны сверху и снизу. Надеюсь, у меня есть смысл.

Это прекрасно работает в FireFox и IE, но в Chrome я заканчиваю лентой внизу. Если я возьму верхний край: бит, тогда черная полоса уходит, и браузер, похоже, вертикально центрирует изображение самостоятельно. Но тогда это затягивает FF и IE.

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

Еще одна вещь, иногда мой плагин прекрасно работает в Chrome, иногда он появляется. Например, у меня будет слайдер на паузе, и он начнет играть без меня, щелкнув start. Что я должен искать? Это только мой второй плагин, поэтому я все еще зеленый и, вероятно, более амбициозный, чем мой текущий уровень:)

ОТВЕТЫ

Ответ 1

Если вы используете .attr(), вы сможете установить/получить атрибуты. Если вы хотите изменить атрибут style, вы можете использовать .css() или .attr('style', '<some-style>'). Первый предпочтительнее, поскольку это то, для чего он нужен, но последний работает, однако он перезапишет любые другие встроенные стили, в то время как .css() позволит вам редактировать только те стили, которые вы хотите, не затрагивая других.

Документы для:

Вот что я придумал:

//cache the image we want to manipulate
var $img = $('img');

//bind an event handler to the `resize` event for the viewport
$(window).on('resize', function () {

    //get the width and height of the viewport and store it in an object,
    //also get the aspect ratio of the image and it calculated height based on the viewport width
    var viewport = {
            width   : $(this).width(),
            height : $(this).height()
        },
        ratio     = ($img.height() / $img.width()),
        imgHeight = Math.floor(viewport.width * ratio);

    //update the CSS of the image element
    $img.css({
        width     : viewport.width,
        height    : imgHeight,
        marginTop : (imgHeight > viewport.height) ? Math.floor((imgHeight - viewport.height) / 2 * -1) : 0
    });

//trigger a `resize` event to fire on the `window` object for page-load so the element is loaded as full-width
}).trigger('resize');

Вот демо: http://jsfiddle.net/Zex4S/1/

Обратите внимание, что .on() является новым в jQuery 1.7 и в этом случае совпадает с .bind(): http://api.jquery.com/on

(imgHeight > viewport.height) ? Math.floor((imgHeight - viewport.height) / 2 * -1) : 0: Это важный фрагмент кода, это тройная операция.

(imgHeight > viewport.height): Это начало оператора if, проверяя, превышает ли значение imgHeight значение viewport.height.

? Math.floor((imgHeight - viewport.height) / 2 * -1): Если оператор разрешает true, то это то, что будет возвращено, imgHeight минус viewport.height, деленное на два и умноженное на отрицательное (для возврата отрицательного значения к центру изображения вертикально).

: 0: наконец, если оператор if разрешает false, тогда эта скважина будет возвращена, которая будет прикреплять изображение вверху контейнера.