问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

怎样让图片只显示中间的部分？

头像
3521200
    397962120

    就是一个缩略图列表只想让它显示完整图片的中间部分 应该用的是background-position属性吧 可是试了一下还是只是显示左上角的部分怎么回事？

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style type="text/css">
        *{margin: 0;padding: 0}
        div{width: 120px;height: 120px;overflow: hidden;background-repeat: no-repeat;float: left;
background-position:center center;background-size: cover;}
    </style>
</head>
<body>
    <div>
        <img src="1.jpg">
    </div>
    <div>
        <img src="1.jpg">
    </div>
    <div>
        <img src="1.jpg">
    </div>
</body>
</html>
    csshtml
    阅读 10k
    4 个回答
    得票最新
    头像
    北堂棣
      6.6k94268
      ✓ 已被采纳

      background-position属性是针对设置的背景图片，你的背景图片呢？

      要使用background-image设置背景图片：

      div{
    width: 120px;height: 120px;overflow: hidden;background-repeat: no-repeat;float: left;
    background-image: url(1.jpg); // 设置背景图片
    background-position:center center;background-size: cover;
}

      而不是再div里用img标签显示图片

      头像
      WHMac
        1361520

        object-fit 找下这个属性试试，background-position是只对背景图片生效吧。

        头像
        须臾
          31484055

          我的做法是

          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：
        <img v-bind:src="videoItem.img_url" alt="" class="itemImg" v-on:load="loadImg(index, $event)" :class="{ 'toWidth': videoItem['toWidth'] == true}">
              需要考虑缩略图和你的容器的宽高比，总有一个是撑满的，也就是宽是100%，或者高是100%，然后剩下一个属性就是需要计算的
          头像
          Yooloo
            9672615
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏