html页面纯CSS图片截取方法的总结

在开发的时候遇到过这几种情况。1、按照UI设计给的图纸的大小最后拿到的图因为原像素过大而导致的图片被缩放或者扩大的问题 2、只想呈现图片本身的某一区域的 3、截取某一部分的。 目前遇到的几种情况可以分别用不同的方法去解决，大概总结了2种，分情况来用。

1、用div来代替img（这种用的比较多）

<div class="fl" :style="{background:'url('+itm.img_url+') center center',backgroundSize:'300% 300%',width:'81px',height:'81px',marginRight:'9px'}" v-for="(itm,idx) in item.images" :key="idx"></div>

2、截取img的大小（纯截取方法）

img{
	position:absolute,
	clip:rect(0 100px 100px 0),
	width:100px
}

第二种情况是最近的项目中在评论列表的功能里面有获取到图片。从后台获取的方法 是 v-html 如果是这样去获取数据的话，那么会存在一个渲染的问题 如果你想改变

<div v-html="detail_content" style="white-space: pre-wrap !important;word-wrap: break-word !important;*white-space: normal !important;padding:0 0 20px 0;" class="detailDiv" id="detail_html">

v-html里面的图片的问题 那么就用 「.detaildiv>>>img 」这种方式去渲染

.detailDiv >>> img{
    height: 100%!important;
}