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

Question

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

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

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

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

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

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

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

Answer 1

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

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

• .attr(): http://api.jquery.com/attr
• .css(): http://api.jquery.com/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's calculated height based on the viewport's 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, разделенное на два и умноженное на отрицательное (чтобы вернуть отрицательное значение для центрирования изображения по вертикалиly).

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