如何裁剪和对齐彼此相邻的图像？

Question

在此grammar page 上，顶部有一个 590 像素 X 183 像素的主图像，底部有 5 个 121 像素 X 137 像素的主图像，彼此水平对齐：

底部图像是顶部主图像的调整大小的裁剪。在屏幕截图示例中，底部的第三张图像是顶部图像的调整大小的裁剪，总线。如果您单击第一个底部图像（书籍），它将带您进入一个页面，其中书籍也是顶部的图像（如上面的公共汽车）。

所有这些冗长但希望清晰的介绍是为了问我如何将底部图像水平对齐为顶部图像的调整大小裁剪？ 现在，底部的图像被裁剪并离线调整大小，然后作为新文件上传。因此，要访问从底部图像链接到的所有 5 个页面，必须下载 10 个图像文件。但如果我可以调整大小和裁剪（并且仍然让图像水平对齐），那将只有 5 个文件。 我尝试使用 margin-left（和高度）来调整大小和裁剪：

<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"/> 

但是，正如我在第二张图片上设置左边距一样，第二张图片超过了第一张。我该如何防止呢？我错过了什么？

表格示例：http://jsfiddle.net/EZnAg/

Answer 1

将图像放在 div 中，在包含图像的 div 上应用宽度、高度、float:left、position:relative 和 overflow:hidden，然后根据需要对图像进行绝对定位。如果图像需要调整 faux/css 大小，也可以在 css 中应用。

* {
        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/

如果你恢复宽度：100%；在我的 jsfiddle 中的 .placeholder img 上，希望这能提供您想要的效果，或者至少让您领先一步？

Answer 2

裁剪后的图像实际上是具有不同纵横比的新创建的图像（来自原始图像）。假设这些图像是完全不同的图像（而不是显示为 width="smallpx" height=smallpx" 的相同图像），您可以将它们放在类似这样的 div 中

<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>

为了裁剪，你必须使用 jquery 脚本来创建具有小纵横比和尺寸的新图像....

否则，如果您想以小缩略图大小显示相同的大图像，那么您可以使用固定大小的 div 并将溢出设置为隐藏