jQueryプラグインMaximageを使う機会があり、触ってたんですが、公式に公開されていたサンプルがまちがっておりました。
Custom “backgroundSize” Function
$(function(){
// Trigger maximage
jQuery(‘#maximage’).maximage({
cssBackgroundSize: false,
backgroundSize: function( $item ){
// Contain portrait but cover landscape
if ($item.data(‘h’) > $item.data(‘w’)) {
if ($.Window.data(‘w’) / $.Window.data(‘h’) < $item.data(‘ar’)) {
$item
.height(($.Window.data(‘w’) / $item.data(‘ar’)).toFixed(0))
.width($.Window.data(‘w’));
} else {
$item
.height($.Window.data(‘h’))
.width(($.Window.data(‘h’) * $item.data(‘ar’)).toFixed(0));
}
} else {
if ($.Window.data(‘w’) / $.Window.data(‘h’) < $item.data(‘ar’)) {
$item
.height($.Window.data(‘h’))
.width(($.Window.data(‘h’) * $item.data(‘ar’)).toFixed(0));
} else {
$item
.height(($.Window.data(‘w’) / $item.data(‘ar’)).toFixed(0))
.width($.Window.data(‘w’));
}
}
}
});
});
ってなってるんですが、
$(function(){
// Trigger maximage
jQuery(‘#maximage’).maximage({
cssBackgroundSize: false,
backgroundSize: function( $item ){
// Contain portrait but cover landscape
if ($item.data(‘h’) > $item.data(‘w’)) {
if ($.Window.data(‘w’) / $.Window.data(‘h’) < $item.data(‘ar’)) {
$item
.height(($.Window.data(‘w’) / $item.data(‘ar’)).toFixed(0))
.width($.Window.data(‘w’));
} else {
$item
.height($.Window.data(‘h’))
.width(($.Window.data(‘h’) * $item.data(‘ar’)).toFixed(0));
}
} else {
if ($.Window.data(‘w’) / $.Window.data(‘h’) < $item.data(‘ar’)) {
$item
.height(($.Window.data(‘w’) / $item.data(‘ar’)).toFixed(0))
.width($.Window.data(‘w’));
} else {
$item
.height($.Window.data(‘h’))
.width(($.Window.data(‘h’) * $item.data(‘ar’)).toFixed(0));
}
}
}
});
});
でした。縦画像はOKなんですが、横画像が画面からはみ出るといったところ。