img 标签的 object-fit 属性

设置图片固定尺寸后,可以通过 object-fit 属性调整图片展示的形式

object-fit: contain;

  • 图片的长宽比不变,相应调整大小。

object-fit: cover;

  • 当图片的长宽比与容器的长宽比不一致时,会被裁切。

object-fit: fill;

  • 图片不再锁定长宽比,完全适应盒子容易得长宽,被拉抻填充满盒子。

object-fit: none;

  • 以图片原尺寸居中展示到盒子中,不被拉伸压缩。多余部分被剪切。

DEMO 代码

html 复制代码
 <div class="validateForm">
  <el-select v-model="imgObjectFit" placeholder="请选择属性" value-key="key">
    <el-option
      v-for="item in selectDict"
      :key="item.key"
      :label="item.label"
      :value="item"
    >
    </el-option>
  </el-select>
  <p>属性 object-fit: {{ imgObjectFit.label }}</p>
  <div class="imgContainer" :class="'imgContainer' + imgObjectFit.key">
    <img :src="imgSrc" alt="" />
  </div>
  <p>原图</p>
  <img :src="imgSrc" alt="" />
</div>
<script>
export default {
  name: "dataEdit",
  components: {},
  data() {
    return {
      selectDict: [
        { label: "contain", key: 1 },
        { label: "cover", key: 2 },
        { label: "fill", key: 3 },
        { label: "none", key: 4 },
      ],
      imgObjectFit: {},
      imgSrc: require("../../../assets/image/testImg.png"),
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.validateForm {
  width: 100%;
  max-width: 800px;
  height: 100%;
  padding: 32px;
  background: #fff;
  .imgContainer {
    width: 200px;
    height: 200px;
    background: #000;
    border: 3px solid red;
    &.imgContainer1 {
      img {
        object-fit: contain;
      }
    }
    &.imgContainer2 {
      img {
        object-fit: cover;
      }
    }
    &.imgContainer3 {
      img {
        object-fit: fill;
      }
    }
    &.imgContainer4 {
      img {
        object-fit: none;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style> 
相关推荐
爱电摇的小码农1 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
一只毛驴1 小时前
面试:SASS/LESS/SCSS区别
css
chao_7891 小时前
CSS表达式——下篇【selenium】
css·python·selenium·算法
土豆12502 小时前
提升CSS开发效率的必备Chrome插件
css·chrome
q567315236 小时前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
柚子81615 小时前
scroll-marker轮播组件不再难
前端·css
凌辰揽月18 小时前
7月10号总结 (1)
前端·css·css3
天天扭码18 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
sunbyte18 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Eighteen Z19 小时前
CSS揭秘:10.平行四边形
前端·css·css3