css 图片 截取 缩略图

在网页设计中，图片成为不可或缺的元素之一，然而高清的图片不仅占用大量的带宽，也会影响网页的加载速度，因此为了更好地优化网页加载速度，我们可以使用CSS来生成图片缩略图。

CSS的background属性可以非常方便地实现图片截取和缩略图。比如，我们要截取一个200px * 200px大小的图片的左上角50px * 50px大小的部分，可以如下代码实现：

div {
  width: 50px;
  height: 50px;
  background-image: url("image.jpg");
  background-size: 200px 200px;
  background-position: 0 0;
}

上述代码中，我们定义了一个div元素，并指定了其宽高为50px，并使用background-image将图片设置为其背景。接着，我们使用background-size指定图片的大小为200px * 200px，这是为了告诉浏览器图片原始大小，方便进行截取。最后，我们使用background-position将背景图的起始位置设定为左上角（0，0），也就是图片的左上角。

如果我们要生成图片缩略图，可以使用background-size来设置缩略图的大小。比如，我们要生成一个宽度为100px，高度为80px的缩略图，可以如下代码实现：

div {
  width: 100px;
  height: 80px;
  background-image: url("image.jpg");
  background-size: 100px auto;
  background-position: 0 0;
}

上述代码中，我们将background-size的宽度设为100px，高度设为auto，这样浏览器会根据宽高比例自动计算出缩略图的高度。由于缩略图的大小与原图的大小不同，我们也可以使用background-position来调整其位置，从而生成自己想要的缩略图效果。