0

I am making a responsive portfolio website using WordPress. I have a small issue that is breaking the layout. All images are meant to be 300px wide by 200px high. I have also used the WordPress API to crop images if the user uploads images that are larger than the above mentioned dimensions

add_image_size( "portfolio", 300, 200, true );

What this does for me is that it inserts the width="300" and height="200" attributes to the images automatically (but the original dimensions of the image stay the same they are just being resized) This works well except when i try to resize my browser window..

Here is a senario: The client uploads an image with dimensions 300px wide and 210px high.. initially it is being resized and shown hence the layout is perfect but when i resize the browser the images gets resized as well but with respect to its "original dimensions".. hence the image with the original height of 210px is larger that the rest of the images.. and as i am floating all the images to form a 3 column layout the difference in height breaks the layout (shifting the column below this large image to the right and leaving an empty column below itself.)

How do i fix this issue? I thought of using timthumb to resize all images before they are display.. hence changing the original dimensions of the image on the fly but i think this is not an efficient way? Any other solution to this problem ? Also i dont want to using anything like jQuery Masonry as i have a specific layout to maintain.

Thanks

Lucky Soni
  • 6,811
  • 3
  • 38
  • 57

1 Answers1

0

You can use the max-height rule from css to limit the height of all images equally.

eg:

.gallery img{
  max-height: (some height);
}

Use % or em for the height, pixels might not work as well in a responsive design.

daveyfaherty
  • 4,585
  • 2
  • 27
  • 42
  • Thanks but what should i set max-height equal to? how to i determine the % or em value? moreover % of what? – Lucky Soni Mar 21 '13 at 13:19
  • I don't know. Start with setting it at 200px. When you want it to be bigger, you'll need to change that to something else. – daveyfaherty Mar 21 '13 at 13:32