0

I am designing a site that sells apps. Each product page contains text with screenshots. I'm having trouble controlling the size and behavior of the images. Each screenshot is a different size and shape - some being tall and narrow while others being short and wide.

My question:
How am I supposed to control the size of these images? Some are perfect at 100%, but some others would be way too big at 100%. So if I set a value in the css, it will be ok for image 1,3,6,9 but not for images 2,4,6,8 (and obvioulsy there are more than 2 types of sizes...). I tried using max-width, but that obviously failed because if one picture exceeds the max-width, it will be scaled down, while another will not - this produces a funny looking page!
Am I supposed to do local styling for each image in such a case?
And if the answer is that local styling is required here, does that mean that each page needs it's own media queries also to resize responsively?

Thanks.

DaveyD
  • 337
  • 1
  • 5
  • 15
  • Do you control the server side as well? You could resize them according to arbitrary rules before loading them on the page, simplifying your rendering code. – Owen Aug 03 '16 at 02:36
  • is there no way to make them background images instead of inline? perhaps some handy `Javascript` may be called for to convert inline to background.. with them as background images you can use `background-size:contain` in your CSS to make them fit perfectly – haxxxton Aug 03 '16 at 02:43
  • @Owen, I sort of have control, but I am not well versed in server-side code. – DaveyD Aug 03 '16 at 03:17
  • @haxxxton, I am not sure how this can help since this also requires an original size to fit the image into. – DaveyD Aug 03 '16 at 03:18
  • @DaveyD you'd use something like http://getbootstrap.com/ or https://css-tricks.com/forums/topic/making-a-responsive-css-square/ – haxxxton Aug 03 '16 at 06:09

1 Answers1

1

You can make 5 css class, named .width1 to .width5, having width value from 20% to 100%.

When adding an new image, choose a class that fit your need.

If you need more precision, create a set of 10 class instead of 5 ! Edit : as promised, the code :

.size1{width:10%;}
.size2{width:20%;}
.size3{width:30%;}
.size4{width:40%;}
.size5{width:50%;}
.size6{width:60%;}
.size7{width:70%;}
.size8{width:80%;}
.size9{width:90%;}
.size10{width:100%;}

So the image :

<img class="size2" src="..." />

will be 20% wide.

technico
  • 1,192
  • 1
  • 12
  • 22
  • this is a good idea - I actually began doing this... however it was getting very confusing.... I was looking for something simpler if possible. – DaveyD Aug 03 '16 at 03:20
  • This is a common implementation, but surely not the only one. it is used by some CMS, Prestashop i.e use this method with 12 different size. You can rely on this and use these css class in your future project. I edit the answer to add some code. – technico Aug 03 '16 at 04:00