On my Tumblr blog, I'm trying to use jQuery to select photo entries (imgs) that have certain ratios and resize them in certain ways.
Specifically: If an image's width is greater than 250px, resize it so the height is 250px, and the width "auto". If an image's height is greater than 250px, resize it so the width is 250px, and the height "auto". Lastly, if the image is a perfect square, resize it to 250px by 250px. Here's what I'm currently using. If it's weirdly coded, please forgive me, I honestly just fiddled with it until I got some desired results...
<script>
$(document).ready(function() {
$('.photo_post img').each(function() {
var maxWidth = 250; // Max width for the image
var maxHeight = 250; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(height > maxHeight){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height < maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
height = height * ratio; // Reset height to match scaled image
}
});
});
</script>
My problem is that it doesn't work correctly on all photos.
I'm not super familiar with jQuery, so deliberate and detailed answers are appreciated.
You need to check if the image is portrait or landscape and then adjust the size based on that.
Updated JS:
$(document).ready(function() {
$('.photo_post img').each(function() {
var maxWidth = 250; // Max width for the image
var maxHeight = 250; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Portrait
if (height > width) {
// Check if the current height is larger than the max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
height = height * ratio; // Reset height to match scaled image
}
}
// Landscape
else {
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.