StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to crop and align images next to each other?
text
Body
copied!<p>On this <a href="http://www.imparare-inglese.it/plurale-inglese.html" rel="nofollow noreferrer">grammar page</a> 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:</p> <p><img src="https://i.stack.imgur.com/AroHk.png" alt="page with resized and cropped images"></p> <p>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).</p> <p>All this long-but-hopefully-clear introduction, is to ask <strong>how can I horizontally-align the the bottom images as a resized crop of the images at the top?</strong> 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:</p> <pre><code><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"/> </code></pre> <p>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?</p> <p>Example with tables: <a href="http://jsfiddle.net/EZnAg/" rel="nofollow noreferrer">http://jsfiddle.net/EZnAg/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload