我是靠谱客的博主 跳跃水蜜桃,这篇文章主要介绍html img取一张图片的中间部分显示,怎样让图片只显示中间的部分?,现在分享给大家,希望可以做个参考。

我的做法是

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内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(35)

评论列表共有 0 条评论

立即
投稿
返回
顶部