html中img图片截取显示中间部分

HTML中img标签只显示图片中心位置的方法

我之前在网上搜到其他的方法：

第一种：

用到css的clip:rect(top right bottom left);用法，需要配合position: absolute使用：如下

<img src="图片地址"
     style="position: absolute;clip: rect(0px,250px,200px,50px);width: 300px;height: 200px">

注意：width和height是图片的实际宽高比的等比例缩放大小，再用rect方法来设置图片的剪切范围。

第二种：

用img的background属性：

<style type="text/css">
        img {
   
            background-image: url(图片地址);//设置背景图片
            background-repeat: no-repeat;//背景图像将仅显示一次。
            background-attachment: scroll;//
            background-position: -50px 0px;//设置背景图片的的偏移量，这个-50相当于背景整体向左偏移50，就可以显示图片的中心
            background-size: 300px 200px;设置背景图片的大小，相当于图片实际宽高等比例饿缩放的
            background-color: transparent