Home > Web Front-end > JS Tutorial > body text

Simple code for jquery images that are not automatically reduced in proportion_jquery

WBOY
Release: 2016-05-16 17:27:47
Original
1076 people have browsed it
Copy code The code is as follows:

jQuery(document).ready(function()
{
/* The picture is not completely scaled down automatically*/
$(window).load(function(){$('#content div.thumbnail img').each(function(){ var x = 200;
//Fill in the target image width
var y = 140;
//Fill in the target image height
var w=$(this).width(), h=$(this). height();
//Get the image width and height
if (w > x) {
//When the image width is greater than the target width
var w_original=w, h_original=h; h = h * (x / w);
//Calculate the height proportionally based on the target width w =x;
//The width is equal to the predetermined width if (h < y) {
//If reduced proportionally When the final height is less than the predetermined height
w = w_original * (y /h_original);
// Recalculate the width according to the target height h = y;
// The height is equal to the predetermined height
}
}
$(this).attr({width:w,height:h}); }); }); });
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template