0

i have list of images i just want to show them horizontally in HTML ,if it reaches width limit it need to add at bottom row

and i have very big images how can i show them small with maintaining aspect ratio

Digit
  • 1,929
  • 1
  • 14
  • 17
  • 3
    What you tried so far? Can you post your code please? – Alex Char Jun 10 '14 at 13:06
  • You can achieve this with basic html and css.. have a containing div with fixed width.. inside IMG tags with your images with set widths.. and you're done.. show us more info if you want more help. – webkit Jun 10 '14 at 13:09
  • simply set either `width`/`height` to the *small* value you need and the other as `auto`. rest of the things you mentioned will happen automatically…. – T J Jun 10 '14 at 13:10
  • Lots of things that need to be considered here. Do you have a design as well? Do all images have the same ratio? Are they all portrait/landscape/mixed? And if the images are really big, you might have to generate thumbnails... Have a look at Masonry: http://masonry.desandro.com/ – Reinder Wit Jun 10 '14 at 13:10
  • Take a look here http://radiatingstar.com/distribute-divs-images-equaly-line and http://stackoverflow.com/questions/5206140/horizontally-scrolling-list-of-images – Systematix Infotech Jun 10 '14 at 13:13

3 Answers3

0

Using CSS3 for example:

.90deg_image_rotation { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg); 
}
mrcrgl
  • 640
  • 4
  • 11
0

It sounds like what you want is something like Freewall. It is a JQuery based plugin to handle the creation and management of grid systems.

Ian T. Small
  • 304
  • 2
  • 16
0

You can use CSS. 

Float: left;

Will give you the horizontal display you want and

Width: 200px;

Will give you the resize you want although you may need to play with the value to get what you are after.

Note that you should only specify either width or height of the image because that will preserve the aspect ratio. Specifying them both will destroy it unless of course you have some custom js which I have seen before but that's usually very fragile

iLoveTux
  • 3,552
  • 23
  • 31