我的做法是
loadImg (i, e) {
var wrapperWidth = $('.videoPosterContainer').width()
var wrapperHeight = $('.videoPosterContainer').height()
if(e.target.naturalWidth/e.target.naturalHeight - (wrapperWidth/wrapperHeight) > 0){
this.$set(this.videoList[i], 'toWidth', false)
$(e.target).css('transform','translateX(-'+(e.target.width-wrapperWidth)/2+'px)')
}else {
this.$set(this.videoList[i], 'toWidth', true)
$(e.target).css('height', 'auto')
var radio = wrapperWidth/e.target.naturalWidth
$(e.target).css('transform','translateY(-'+(e.target.height*radio-wrapperHeight)/2+'px)')
}
}
css:
.itemImg {
height: 100%;
}
.toWidth {
width: 100%;
height: auto;
}
html:
需要考虑缩略图和你的容器的宽高比,总有一个是撑满的,也就是宽是100%,或者高是100%,然后剩下一个属性就是需要计算的
最后
以上就是跳跃水蜜桃最近收集整理的关于html img取一张图片的中间部分显示,怎样让图片只显示中间的部分?的全部内容,更多相关html内容请搜索靠谱客的其他文章。
发表评论 取消回复