Question

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

page with resized and cropped images

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

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

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

但正如我在第二个img上设置margin-left，第二个图像超过了第一个。我该如何预防呢？我错过了什么？

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

Answer 1

裁剪后的图像实际上是新创建的图像（来自原始图像），具有不同的宽高比。假设这些图像是完全不同的图像（而不是像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并将overflow设置为隐藏

Answer 2

将图像放在div中，应用宽度，高度，浮动：左，位置：相对和溢出：隐藏在包含图像的div上，然后根据需要绝对定位图像。如果图像需要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上，希望这能提供你想要的效果，或者至少让你先行一步？

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

2 个答案: