jQ handles images that are too large in the page_html/css_WEB-ITnose

This is a very practical function. It is inevitable that some oversized pictures will appear on the web page, which will stretch the page or partially hide the pictures. We usually use the max-width of CSS To control it, but ie6 doesn't like this. I encountered this kind of confusion when I was building a website. Because I was learning jQuery recently, I thought of using jq to deal with this problem. After some thinking, I feel that this problem is actually not difficult. Let’s explain it in detail below:



1. Idea:

To solve the size problem, we must first obtain The width and height of the picture, and then define a maximum width and make a judgment. If the actual width is greater than the set maximum width, then make the actual width equal to the maximum width, and the height can be reduced proportionally according to the aspect ratio. I organized my thoughts and listed the Chinese sentences:

1) Set the maximum width
2) Get the image width
3) Get the image height
4) Define the proportional relationship of the height ( New height = height/width * set width)
5) Determine, if width > set maximum width
6) then width = maximum width; height = new height
7) End



2. Code:

Write the above Chinese statement into a complete jQ statement:

$(function() {
$(' .content img').each(function() {
var maxWidth = 600;
var width = $(this).width();
var height = $(this).height();
var newHeight = height / width * maxWidth;
if(width > maxWidth) {
$(this).width(maxWidth);
$(this).height(newHeight);
}
});
});



The .content img here is the selector, which should be modified according to the actual web page structure, such as the following structure:

3. Compatibility:



Doing compatibility testing is an essential step. After all, the browser varieties are too complex. I have tested it here under ie6, ie9, firefox, and chrome, and it is very good and successful!



But the thinking problem cannot be too limited, because the width and height of the image must first be obtained in the code , if the height and width are not defined, will it still be normal?



Chairman Mao taught us that true knowledge comes from practice! Of course, the doubts can only be known by actual testing. I added alert(width); in jq to see what the browser will tell us.



1) Height and width are empty:



In this case, the actual width obtained by ie6 and ie9 is 1, firefox obtains 800, and chrome obtains 0, which means that only firefox can run normally.



2) No height and width attributes:



In this case, The values ​​obtained by ie6, ie9 and firefox are all 800, and the values ​​obtained by chrome are 0, which means that ie9 and firefox are normal, but chrome has failed. Chrome, which has always been admired by others, is a bit disappointing.



From this point of view, when designing the website, the height and width attributes of the image should be added correctly before the previous jq can be used to control the size of the image.







Four. Function expansion:



Okay, the previous code can already Pictures that are too large are controlled, and then some expansions are made on this basis.

1), if the size is too large, add css class to the picture:

$(this).addClass("bigpic");

2), if the size is too large If the size is too large, set the css of the image:

$(this).css("cursor","pointer");

3), if the size is too large, set the attributes of the image:

$(this).attr("title","Click to enlarge");

4), if the size is too large, click it to open the original image in a new window:

$(this).click(function(){window.open(this.src)});

And so on...add more as needed.