Resizing Images for Mobile Using jQuery
Mobile design is fun. It's this unique blend of digital, touch and interaction all wrapped into a small device that fits into the palm of your hand. And, let's face it, it's still a new, rapidly growing technology. New stuff is always fun.
Now, if you're like me, you've probably read about 100 ways to resize your images on mobile. With the rise in popularity of media queries, people are resizing images based off certain screen widths or event swapping images for smaller ones. While each of these are great, they're not always realistic for your project. Let me elaborate:
Media queries are awesome. They'll let you determine what styles to use depending what view-port size you have. Read more about them here to see what's possible. But media queries only really work well when you're dealing with a responsive site design, not a site with a custom mobile template.
The technique I'm going to show you works extremely well when you're serving a different template to your mobile user, or you're developing a new mobile website for a client that already has a CMS in place that can't handle swapping out images with lower quality versions.
The jQuery
// Don't forget to load the jQuery library before doing this
// Initialize jQuery
$(document).ready(function() {
// Set the variable $width to the width of our wrapper on page load
$width = $('#content').width();
// Target all images inside the #content. This works best if you want to ignore certain images that are part of the layout design
$('#content img').css({
// Using jQuery CSS we write the $width variable we previously specified as a pixel value. We use max-width incase the image is smaller than our viewport it won't scale it larger. Don't forget to set height to auto or else it will squish your photos.
'max-width' : $width , 'height' : 'auto'
});
});
The HTML
Put your img tag here
That's it! Once your phone/tablet loads, the jQuery will find the width of your wrapper and save it in the variable $width and apply it throughout. The same is true on an iPad or any device. Don't forget to use 'max-width' - that's the key. If your iPad is 700px wide, and your image is 600px, it will stay 600px. If your device is 500px, and your image is 600px, it will resize your image to be 500px and load correctly.
Looking ahead: A lot of great things are happening with jQuery and mobile phones. If you haven't looked at jQuery mobile yet, I encourage you too. I'm sure lots of great resources are out there for resizing images on mobile, but this is the simplest solution I've come up with to date. I'm open to other ideas or your techniques as well, just post in the comments!
Comments
nice
I'm just beginning to get into mobile web sites. I know, late bloomer. And this was one of my first inquires on how you size the images so that they are well sized in the view. My initial tests show that this works pretty well, but it may have influenced some of the default jQuery mobile images. I say may have because I'm still in the early testing phases - could just be my own environment. Thanks for the tip!
Add new comment