Question

我正在使用此css代码显示大图像的一部分

img.ac{
 position: absolute;
clip: rect(0px,72px,97px,0px);
}

我的原始图像尺寸为949像素到349像素。当剪辑图像时，图像的大小保持不变。如何将图像的大小设置为等于剪切的图像大小？

我还想在布局中使用所有剪切的图像。

更新后

我目前的代码是：

.a{
   width:72px;
   height:97px;
   overflow:hidden;
  }

 img.ca{
 position: absolute;
clip: rect(0px,72px,97px,0px);  
 }

现在问题是两个图像之间存在不需要的空间，如示例中所示。我该如何避免呢？

Answer 1

除了使用仍然保持图像大小的剪辑（它只是隐藏剪裁的部分），您可以将图像包装在overflow:hidden;的容器中，而不为图像设置任何CSS属性。否则，图像将按比例保持比例。

.clip{
    width:72px;
    height:97px;
    overflow:hidden;
}

DEMO http://jsfiddle.net/a_incarnati/cL5tc37x/3/

如果添加其他图像，您将看到剪裁图像没有占用空间。

更新以删除空格

如果您需要从每张图片中删除空格，只需添加float:left;

即可

将它应用于您的代码，您也可以这样做：

DEMO http://jsfiddle.net/a_incarnati/3a3sj4r1/2/