图片裁剪居中的两种方式(CSS和JS)
一、JS方式实现:通过Vue中图片load方法(当然原生JS有对应的img.onload事件),获取到图片的原始尺寸(img.naturalWidth, img.naturalHeight),然后判断图片是长图还是宽图,如果是长图,则设置图片的宽为100%,高度自适应;反之是宽图,设置图片的高为100%,宽为自适应。当然,如果图片的原始尺寸小于盒子的宽高尺寸,则取图片的原始尺寸。页面:...
一、JS方式实现:
通过Vue中图片load方法(当然原生JS有对应的img.onload事件),获取到图片的原始尺寸(img.naturalWidth, img.naturalHeight),然后判断图片是长图还是宽图,如果是长图,则设置图片的宽为100%,高度自适应;反之是宽图,设置图片的高为100%,宽为自适应。当然,如果图片的原始尺寸小于盒子的宽高尺寸,则取图片的原始尺寸。
页面:
<!--长图片-->
<div class="banner">
<img :src="require('../../static/img/h.jpg')" alt=""
@load="toCenterImage($event)">
</div>
<!--宽图片-->
<div class="banner">
<img :src="require('../../static/img/w.jpg')" alt=""
@load="toCenterImage($event)">
</div>
JS:
methods: {
toCenterImage: (e) => {
let hs, ws,
img = e.currentTarget,
w = img.naturalWidth,
h = img.naturalHeight,
parent = img.parentNode,
pw = parent.offsetWidth,
ph = parent.offsetHeight;
w >= h ? (hs = h >= ph ? '100%' : h+'px', ws = 'auto') : (hs = 'auto', ws = w >= pw ? '100%' : w+'px')
img.style.height = hs
img.style.width = ws
}
},
这种方式,不需要再去写img的样式。
二、CSS方式实现:
其实,css实现起来很简单,只需要设置img的样式:object-fit:none即可,不过你要给img一个高度,因为裁剪嘛
页面:(图片可以自己随便截两张来测试)
<!--长图片-->
<div class="banner">
<img :src="require('../../static/img/h.jpg')" alt="">
</div>
<!--宽图片-->
<div class="banner">
<img :src="require('../../static/img/w.jpg')" alt="">
</div>
样式:
.banner {
width: 375px;
height: 240px;
display: flex;
justify-content: center;
align-items: center;
}
.banner img {
width: 100%;
height: 100%;
/*object-fit:cover;*/
object-fit:none; none则不改变图片原始尺寸
}
object-fit: cover会按照图片原始宽高比对图片进行缩放,无法解决比如宽图片的高度比盒子的高度小,会让图片放大模糊的问题,而none是不改变原始尺寸的,这里我改用了none,满足我的要求。
【CSS中的object-fit属性知识介绍】:
它有以下5个可用值,作用如下:
[ fill
]:被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。
[ contain
]:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。
[ cover
]:被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。
[ none
]:被替换的内容尺寸不会被改变。
[ scale-down
]:内容的尺寸就像是指定了none
或contain
,取决于哪一个将导致更小的对象尺寸。
更多推荐
所有评论(0)