CSS Media Queries and Size of Images

问题

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?

回答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;
}

回答2:

Try using CSS's max-height and max-width properties:

http://css-tricks.com/css-media-queries/

回答3:

You can do it by using the css min-width/height property. It is really easy and straightforward thing.

来源：https://stackoverflow.com/questions/14147545/css-media-queries-and-size-of-images