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

Question

On this grammar page there's a main 590px X 183px image at the top and 5 121px X 137px images at the bottom, aligned horizontally next to each other:
The bottom images are a resized crop of the main image at the top. In the screenshot example, the 3rd image at the bottom is the resized crop of the image at the top, buses. If you click on the first bottom images (books) it will take you to a page where books is also the image at the top (like buses above).
All this long-but-hopefully-clear introduction, is to ask how can I horizontally-align the the bottom images as a resized crop of the images at the top?
Now the bottom images were cropped and resized offline, and then uploaded as new files. So to visit all the 5 pages linked to from the bottom images, one has to download 10 image files. But if I could resize and crop (and still have the images horizontally aligned), those would be just 5 files.
I tried margin-left (and height) to resize and 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 just as I set the margin-left on the 2nd img, the 2nd image goes over the first. How do I prevent that? What am I missing?
Example with tables: http://jsfiddle.net/EZnAg/

Answer 1

Place the image inside a div, apply a width, height, float:left, position:relative and overflow:hidden on that div containing the image, then absolute position the image as required. If the image needs a faux/css resize, apply that 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 you reinstate the width:100%; on the .placeholder img in my jsfiddle, hopefully this provides the effect you want, or at least gives you a head start?

Answer 2

cropped images are actualy new created images (from the original ones)with different aspect ratio. assuming that these images are totally different images(and not the same images just shown as width="smallpx" height=smallpx"), u can place them inside a div something like this
<div id="all_image contained" style="width: 300px;">
<div style="width: 100px; float:left">
<img src="images/img1.jpg" width="80px" height="50px"/>
</div>
<div style="width: 100px; float:left">
<img src="images/img2.jpg" width="80px" height="50px"/>
</div>
<div style="width: 100px; float:left">
<img src="images/img3.jpg" width="80px" height="50px"/>
</div>
</div>
in order to cropping, u have to use jquery script, to create new images with small aspect ratio and dimensions....
or else if u want to display the same large images, in small thumbnail size, then u may use a fixed size div and set overflow as hidden