[分享]css3截取图片中间部分

在Web开发过程中，我们经常需要在页面中展示图片。但是有时候图片的大小和页面的设计并不完全匹配，我们就需要对图片进行截取。那么在CSS3中该如何实现图片截取呢？img { display: block...

在Web开发过程中，我们经常需要在页面中展示图片。但是有时候图片的大小和页面的设计并不完全匹配，我们就需要对图片进行截取。那么在CSS3中该如何实现图片截取呢？

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  object-fit: cover;
} 

上述代码中，我们使用了CSS3的object-fit属性来实现图片的截取。这个属性可以设置图片的填充方式，常见的有以下几种：

• fill：默认值，图片将完全填充容器，可能会变形。
• contain：图片会按比例缩放，直到完全包含容器。
• cover：图片会按比例缩放，直到覆盖容器。
• none：图片不会被调整。
• scale-down：图片会按比例缩放，但不会放大超过原始大小。

而对于图片的截取，我们使用的是cover选项。这个选项会按比例缩放图片，将它覆盖在容器上，超出部分将被裁切。这样就可以实现对图片中间的部分进行截取了。

总的来说，CSS3的object-fit属性在页面中展示图片时非常实用，可以帮助我们快速地对图片进行截取和填充，达到更好的页面效果。