将小图像拉伸到窗口

时间:2013-01-30 08:36:12

标签: javascript jquery image fancybox stretch

如何通过Fancybox将图像完全拉伸到窗口? (Fancybox 2) fancybox的尺寸与图像尺寸一样大,但没有更多。

我注意到fancybox css中存在许多CSS限制,例如:

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

取出max-width/height并设置让我们说width/height200%会拉伸图像,但包含的矩形本身(即:fancybox)的大小相同,它是不再居中。

我正在使用内联方法,例如:jQuery(".fancybox").fancybox()

1 个答案:

答案 0 :(得分:3)

i-pretty-much-up-up-for-for-cool-but-useless-stuff方法:

.fancybox({
 afterLoad  : function () {
  function gcd (x, y) {while (y != 0) {var z = x % y; x = y; y = z;} return x}
  var body = $(document.body)
  if (this.width/this.height > 1) {
   // Max size is document body width.
   var body_width = body.width()
   var current_multiplier = gcd (this.width, body_width)
   if (current_multiplier == 1) current_multiplier = body_width
  } else {
   // Max size is document body height.
   var body_height = body.height()
   var current_multiplier = gcd (this.height, body_height)
   if (current_multiplier == 1) current_multiplier = body_height
  }
  this.width  = this.width  * current_multiplier
  this.height = this.height * current_multiplier
 }
})