-1

I'm trying to have 6 images standing next to each other in one row and stay that way regardless of window size.

When I do them normally with a div tag (something like style="width:33%") they get scaled down and fit one screen, but when I shrink the window screen the images get mixed up in two or more rows.

I tried putting them in a table tag but to no success. If I fiddle around with CSS and @media properties, I'd have to have fixed sizes (px) for the images?

Anyway, I tried googling and searching stackoverflow and trying out every possible solution but I couldn't find anything. @media would be my last resort, I don't want to use it as I guess it uses fixed sizes. I'm doing this for a WordPress site so I can use php, html, css, .js, or maybe a plugin? I just want the images to fit in one row and scale down based on the screen size.

Letterboxer
  • 13
  • 4

1 Answers1

0

I used @Alan's answer from another question. I did it by adding a custom wrapper.

<style>
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}
</style>    

<div class="wrapper">
  <img class="resize" src="image.jpg" />
</div>
Community
  • 1
  • 1
Letterboxer
  • 13
  • 4