3

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?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
Kleigh Heart Garcia
  • 65
  • 1
  • 1
  • 8

3 Answers3

9

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;
}
Jason
  • 3,330
  • 1
  • 33
  • 38
0

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

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

markasoftware
  • 12,292
  • 8
  • 41
  • 69
Head
  • 548
  • 7
  • 26
  • Question: If i implement the .img-container, do i need to visit all the images and add the
    ? It's a bit hard to do that especially for a photo/blog which have thousands of images.     – Kleigh Heart Garcia Jan 03 '13 at 21:36
  • maybe just build an include and inside that include you could have an image variable that sets width and height as well as whatever images need to populate... – Head Jan 03 '13 at 21:56
-1

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

miksiii
  • 2,426
  • 26
  • 22