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> 
相关推荐
码上暴富10 小时前
css里flex+margin布局
前端·css
qq_4005520011 小时前
新的面试题CSS
前端·css
naodianbozzz12 小时前
web第三次作业
前端·javascript·css
centerless12 小时前
深入了解 CSS Grid 布局:构建高效响应式网页的利器
前端·css
The_era_achievs_hero17 小时前
放大镜效果
javascript·css·css3
小猫会后空翻19 小时前
web第三次作业
前端·javascript·css
昨今1 天前
对于简单的HTML、CSS、JavaScript前端,我们可以通过几种方式连接后端
前端·css·html
林啾啾1 天前
CSS预处理器——SCSS的灵活语法
前端·css·scss
Chokcoco1 天前
巧用 CSS 实现高频出现的复杂怪状按钮 - 内凹平滑圆角
前端·javascript·css
Pluto_ssy2 天前
Sass基础知识以及常用知识整理
前端·css·sass