Ответ 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 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, тогда эта скважина будет возвращена, которая будет прикреплять изображение вверху контейнера.