CSS:如何裁剪任何大小的图像?

时间:2013-01-03 13:23:08

标签: html css image crop

我有一个网站,用户可以上传他们的照片,我想准备一个页面,在那里我将显示所有上传的图像很好地排序。 问题是,有人以 400x400px 分辨率上传图片, 1400x800px 中的人和 300x500px 中的某人。

在我要打印所有上传图片的页面上,我想打印尺寸 100x200px 的每张图片。我试图手动设置图像的尺寸,如:

<img src="img.jpg" style="width: 100px; height: 200px" />

但页面看起来很糟糕,所有图像都模糊不清。这样做的最佳方法是什么? 也许从每个图像显示中裁剪 100x200px 的区域呢?但是怎么做呢?

1 个答案:

答案 0 :(得分:1)

在你的情况下,我会尝试这个:

  • 在每张图片上指定100px的宽度
  • 用100x200px大小的div和overflow:hidden
  • 围绕你的图像