Use JavaScript to solve page picture stretching problems (recommended) _javascript tips

Problem description

This period of time in the need to do the PM when suddenly found a problem, products on the image from a number of third parties, the specific size can not be determined, if directly in the style of the image of the size of the picture will appear tensile phenomenon, very affected the beauty of the product, so hope to find a better solution. I first made a simple demo to show the problem.

This kind of situation still quite affects beautiful, whether can consider the dynamic setting picture size?

Solving ideas

If you can load the picture resource in the browser, get the real size of the picture and the size of the picture container, and then dynamically set the width and height property of the picture.

Get the real size of a picture

HTML5 has provided an appropriate way to return the real size of the picture (Img.naturalwidth, Img.naturalheight), and for IE6/7/8 you can also get the size of the real size by the following methods.

var imgae = new Image ();
IMAGE.SRC = IMG.SRC;
Image.onload = function () {
var w = image.width;
var h = image.height;
}

The following is to write the corresponding JS method to get the picture of the real size of the picture container size.

Setimgsize:function (IMG, callback) {
if (img.naturalwidth) {//HTML5
callback (IMG, Img.naturalwidth, Img.naturalheight, Img.width, img.height);
else {//IE 6 7 8
var imgae = new Image ();
IMAGE.SRC = IMG.SRC;
Image.onload = function () {
callback (IMG, Image.width, Image.height, Img.width, img.height);}}}

Reset Picture size

After getting the real size of the picture already container size, we need to reset the size of the picture. Here is a simple introduction to the processing of the target: if the size of the set after the display area, then show the middle part of the picture, if the display area is larger than the picture size, the picture center display. With the illustration, the black solid line is the display area of the picture, and the green part is the size of the picture.

Below we provide three methods to deal with the picture, respectively, to achieve the upper two (width consistent), the lower two (highly consistent), the right two (full display area), the following are described in the three ways:

One, to ensure the width of the same

Original width original height container width container height
//Guaranteed width consistent
resetimgsizew:function (IMG, NW, NH, W, h) {
nwh = NW/NH;
WH = w/h;
if (Nwh > Wh) {
img.width = w;
var height = parseint (1/NWH * w);
img.height = height;
var top = parseint ((h-height)/2);
Img.style.marginTop = top + "px";
} else if (NWH < WH) {
img.width = w;
var height = parseint (1/NWH * w);
img.height = height;
var top = parseint ((height-h)/2) *-1;
Img.style.marginTop = top + "px";
} else {
img.height = h;
Img.width = w;
}
,

Here we need to determine the relationship between the length of the original size of the picture and the ratio of the length to the width of the container, if highly affluent, then the picture to move up a certain pixel, if the height is insufficient, the picture down to move the corresponding pixel, as for the other two situations is the same logic, first look at the following processing effect:

Ii. ensure a high degree of consistency

Original width original height container width container height
//Ensure highly consistent
resetimgsizeh:function (IMG, NW, NH, W, h) {
nwh = NW/NH;
WH = w/h;
if (Nwh > Wh) {
img.height = h;
var width = parseint (NWH * h);
Img.width = width;
var left = parseint ((width-w)/2) *-1;
Img.style.marginLeft = left + "px";
} else if (NWH < WH) {
img.height = h;
var width = parseint (NWH * h);
Img.width = width;
var left = parseint ((w-width)/2);
Img.style.marginLeft = left + "px";
} else {
img.height = h;
Img.width = w;
}
}

Third, covered with display area

Original width original height container width container height
//Full screen
resetimgsizewh:function (IMG, NW, NH, W, h) {
nwh = NW/NH;
WH = w/h;
if (Nwh > Wh) {
img.height = h;
var width = parseint (NWH * h);
Img.width = width;
var left = parseint ((width-w)/2) *-1;
Img.style.marginLeft = left + "px";
} else if (NWH < WH) {
img.width = w;
var height = parseint (1/NWH * w);
img.height = height;
var top = parseint ((height-h)/2) *-1;
Img.style.marginTop = top + "px";
} else {
img.height = h;
Img.width = w;
}
,

How to use JS

The above is a brief introduction to the logic of implementation and the final effect, and here is how to use it.

<!--refer to the JS script-->
<script src= "./js/imageload.js" ></script>
<script>
var Imageload = new Imageload ();
To handle all the pictures on the website, the following three types can only use one
//imageload.initimg ("w");//Guaranteed width consistent
//imageload.initimg ("H");//ensure high consistency
Imageload.initimg ("WH"),//Full display area
//Process a single picture, for multiple themselves can write loop statements to implement
imageload.setimgsize ( document.getElementById ("Img1"), Imageload.resetimgsizew);
Imageload.setimgsize (document.getElementById ("Img2"), Imageload.resetimgsizew);
Imageload.setimgsize (document.getElementById ("Img3"), Imageload.resetimgsizeh);
Imageload.setimgsize (document.getElementById ("Img4"), Imageload.resetimgsizeh);
Imageload.setimgsize (document.getElementById ("Img5"), IMAGELOAD.RESETIMGSIZEWH);
Imageload.setimgsize (document.getElementById ("Img6"), IMAGELOAD.RESETIMGSIZEWH);
</script>

Imageload Source

$ (document). Ready (function () {new Imageload ();});
Imageload = function () {this.init ();}; Imageload.prototype = {Init:function () {//This.initimg ("W");}, Initimg:function (type) {var _this = this; var img
s = document.getElementsByTagName (' img '); for (var i=0 i Wh) {img.height = h; var width = parseint (NWH * h); img.width = width; var left = parseint ((width-w)/2)
*-1;
Img.style.marginLeft = left + "px"; else if (NWH < wh) {img.height = h; var width = parseint (NWH * h); img.width = width; var left = parseint ((w-width
)/2); Img.Style.marginleft = left + "px";
else {img.height = h; img.width = w;},//original width original height container width container height//Guaranteed width consistent resetimgsizew:function (IMG, NW, NH, W, h) {
NWH = NW/NH;
WH = w/h;  if (Nwh > Wh) {img.width = W; var height = parseint (1/NWH * w); img.height = height; var top = parseint ((h-height)
/2);
Img.style.marginTop = top + "px"; else if (NWH < wh) {img.width = W; var height = parseint (1/NWH * w); img.height = height; var top = parseint ((Heig
HT-H)/2) *-1;
Img.style.marginTop = top + "px"; else {img.height = h; img.width = w;},//original width original height container width container height//Full Screen Resetimgsizewh:function (IMG, NW, NH, W, h) {n
WH = NW/NH;
WH = w/h; if (Nwh > Wh) {img.height = h; var width = parseint (NWH * h); img.width = width; var left = parseint ((width-w)/2)
*-1;
Img.style.marginLeft = left + "px"; else if (NWH < wh) {img.width = W; var height = parseint (1/NWH * w); img.height = height; var top = parseint ((Heig
HT-H)/2) *-1; Img.style.marginTop = top +"PX";  else {img.height = h; img.width = w;},//Get picture real size and container size Setimgsize:function (IMG, callback) {if (img.naturalwidth)  {//HTML5 callback (IMG, Img.naturalwidth, Img.naturalheight, Img.width, img.height);} else {//IE 6 7 8 var imgae = new
Image ();
IMAGE.SRC = IMG.SRC;
Image.onload = function () {Callback (IMG, Image.width, Image.height, Img.width, img.height);} },
}

The above is a small series to introduce the use of JavaScript to solve the problem of Web page picture stretching, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!