Geek Answers Handbook

How to make Max Width and Height work with jQuery ImgViewer Plugin

I am using ImgViewer v.6 to scale images (with IE8 support).

It works great when the image is wider the higher. However, when the image is higher, the entire height is not displayed in the container.

http://jsfiddle.net/TheFiddler/wmx05cty/

In this script, you can see that the top image has some height.

I need to fill the viewport with as many images as possible without stretching the image. The image should remain proportional. The width should be 100% and the tall image should correspond to the height of the viewport. A tall image should be centered horizontally, and its width and height are visible initially.

So, I modified the plugin to determine the height, and if higher, set the height to the height of the viewport.

  if (height > width) {
        var ratio = $view.height() / height;
        ih = $view.height();
        iw = width * ratio;  
  }

This works, except that the image is not centered. The math in the viewport and image is not entirely correct.

http://jsfiddle.net/TheFiddler/qontbr9e/

I need a way to center both images in my containers, display the entire width so that it fills the container, and if it's a taller image, resize it so that the height fits into the container in init.

This is a dynamic application, so I can’t apply styles to individual images. The same script should work on both images using the same css. I have to use version v.6.

+4
3

. .

, , :

Fiddle x

Fiddle x, y

:

this.$oldview = $img.parent(); //store original container element

:

$(this.view).position({
                    my: "left top",
                    at: "left top",
                    of: this.$oldview
                });

( - (0,0)).

zLeft.

var offsetx = //offset need to horizontally center image
    (this.$oldview.width() / 2) -
    (((this.zimg).width() / 2) / zoom);

$(this.zimg).css({ //center image
    left: zLeft + offsetx + "px"
});

, :

if (zoom < 1) {
    this.options.zoom = 1;
    zoom = 1;
}

text-align:center. , , .

, , : http://jsfiddle.net/qontbr9e/10/ , x y:

var offsetx = //offset need to horizontally center image
    this.$oldview.width() / 2 -
    (this.zimg).width() / 2 / zoom;
var offsety = //offset need to vertically center image
    this.$oldview.height() / 2 -
    (this.zimg).height() / 2 / zoom;

$(this.zimg).css({ //center image
    left: zLeft + offsetx + "px",
    top: zTop + offsety + "px"
});
+2

, , div. , , css. 100%. css.

img {
    width:100%;
    height:100%;   
}

JSFiddle: http://jsfiddle.net/wmx05cty/4/

/ ** **/

( ) , div, div, css.

img {
    max-width:100% ;
    max-height:100%;   
}

JSFiddle: http://jsfiddle.net/wmx05cty/6/

, .

+1

You need maximum maximum height and auto auto margin;

http://jsfiddle.net/wmx05cty/7/

css:

    img {
    max-width:100%;
    max-height:100%;
    margin:auto auto;

}
0
source

More articles:


All Articles