html - How to crop and align images next to each other? -

html - How to crop and align images next to each other? -

on grammar page there's main 590px x 183px image @ top , 5 121px x 137px images @ bottom, aligned horizontally next each other:

the bottom images resized crop of main image @ top. in screenshot example, 3rd image @ bottom resized crop of image @ top, buses. if click on first bottom images (books) take page books image @ top (like buses above).

all long-but-hopefully-clear introduction, inquire how can horizontally-align the bottom images resized crop of images @ top? bottom images cropped , resized offline, , uploaded new files. visit 5 pages linked bottom images, 1 has download 10 image files. if resize , crop (and still have images horizontally aligned), 5 files. tried margin-left (and height) resize , crop:

<img style="height:135px; margin-left:-290px;" src="http://www.imparare-inglese.it/uploads/1/1/1/6/11169156/7674785.png"/> <img style="height:135px; margin-left:-610px;" src="http://www.imparare-inglese.it/uploads/1/1/1/6/11169156/6647450.png"/>

but set margin-left on 2nd img, 2nd image goes on first. how prevent that? missing?

example tables: http://jsfiddle.net/eznag/

place image within div, apply width, height, float:left, position:relative , overflow:hidden on div containing image, absolute position image required. if image needs faux/css resize, apply in css too.

* { padding:0; margin:0; } .panels { float:left; } .placeholder { width:200px; height:200px; float:left; overflow:hidden; margin:0 20px 0 0; } .placeholder img { /*width:100%;*/ } <div class="panels"> <div class="placeholder"> <img src="http://www.jakss.co.uk/common/images/shell/header/client-logo.png" /> </div> <div class="placeholder"> <img src="http://www.jakss.co.uk/common/images/shell/header/client-logo.png" /> </div> <div class="placeholder"> <img src="http://www.jakss.co.uk/common/images/shell/header/client-logo.png" /> </div> </div>

http://jsfiddle.net/seemly/pmuzy/

if reinstate width:100%; on .placeholder img in jsfiddle, provides effect want, or @ to the lowest degree gives head start?

html css image margin negative-margin