Question

I’m currently implementing the CSS Media Queries in my WordPress blog and I’m wondering is there any known method on how could I resize a blog image with a width of 400-600px to fit in a screen resolution of an iTouch, iPhone and other smartphone which have small screens.

My idea is to add this CSS:

.blogpost img {
    width:55%;
    height:55%;
}

so that it would automatically resize all the images in my blog. I need help with this matter. I’m not contented with my approach since I’ve heard that it will distort the image. Any professional advice?

Answer 1

It’ll distort the image if you specify both the width and the height, why not just specify one? Then you can add a min-width to make sure it doesn’t get too small. The height will adjust with the width as long as you don’t specify it.

.blogpost img {
width:55%;
min-width:220px;
}

Or you could approach it a little differently and instead make the image 100% width, then make sure it doesn’t go over it’s actual width (so you don’t distort it). This would work well if all of your images were the same size.

.blogpost img {
width:100%;
max-width:600px;
}