img 标签的 object-fit 属性

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

object-fit: contain;

  • 图片的长宽比不变,相应调整大小。
    在这里插入图片描述

object-fit: cover;

  • 当图片的长宽比与容器的长宽比不一致时,会被裁切。
    在这里插入图片描述

object-fit: fill;

  • 图片不再锁定长宽比,完全适应盒子容易得长宽,被拉抻填充满盒子。
    在这里插入图片描述

object-fit: none;

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

DEMO 代码

 <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> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/905379.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

推荐一款功能强大的文字处理工具:Atlantis Word Processor

Atlantis word proCEssor是一款功能强大的文字处理工具。该软件可以让用户放心的去设计文档&#xff0c;并且软件的界面能够按用户的意愿去自定义&#xff0c;比如工具栏、字体选择、排版、打印栏等等&#xff0c;当然还有更多的功能&#xff0c;比如你还可以吧软件界面中的任何…

【算法】【优选算法】双指针(上)

目录 一、双指针简介1.1 对撞指针&#xff08;左右指针&#xff09;1.2 快慢指针 二、283.移动零三、1089.复写零3.1 双指针解题3.2 暴力解法 四、202.快乐数4.1 快慢指针4.2 暴力解法 五、11.盛最多⽔的容器5.1 左右指针5.2 暴力解法 一、双指针简介 常⻅的双指针有两种形式&…

Pandas DataFrame学习补充

1. 从字典创建&#xff1a;字典的键成为列名&#xff0c;值成为列数据。 import pandas as pd# 通过字典创建 DataFrame df pd.DataFrame({Column1: [1, 2, 3], Column2: [4, 5, 6]}) 2. 从列表的列表创建&#xff1a;外层列表代表行&#xff0c;内层列表代表列。 df pd.Da…

二、Go快速入门之数据类型

&#x1f4c5; 2024年4月27日 &#x1f4e6; 使用版本为1.21.5 Go的数据类型 &#x1f4d6;官方文档&#xff1a;https://go.dev/ref/spec#Types 1️⃣ 布尔类型 ⭐️ 布尔类型只有真和假,true和false ⭐️ 在Go中整数0不会代表假&#xff0c;非零整数也不能代替真&#…

Springboot整合原生ES依赖

前言 Springboot整合依赖大概有三种方式&#xff1a; es原生依赖&#xff1a;elasticsearch-rest-high-level-clientSpring Data ElasticsearchEasy-es 三者的区别 1. Elasticsearch Rest High Level Client 简介: 这是官方提供的 Elasticsearch 客户端&#xff0c;支持…

Spark,Anconda在虚拟机实现本地模式部署

如果想要了解模式的概念部分&#xff0c;以及作用请看&#xff1a; Spark学习-CSDN博客 一.在虚拟机安装spark cd /opt/modules 把Anconda和Spark安装包拖拽进去&#xff1a; 解压&#xff1a; tar -zxf spark-3.1.2-bin-hadoop3.2.tgz -C /opt/installs 重命名&#x…

Javaee:阻塞队列和生产者消费者模型

文章目录 什么是阻塞队列java中的主要阻塞队列生产者消费者模型阻塞队列发挥的作用解耦合削峰填谷 模拟实现阻塞队列put方法take方法生产者消费者模型 什么是阻塞队列 阻塞队列是一种支持阻塞操作的队列&#xff0c;在多线程中实现通线程之间的通信协调的特殊队列 java中的主…

[网络协议篇] UDP协议

文章目录 1. 简介2. 特点3. UDP数据报结构4. 基于UDP的应用层协议5. UDP安全性问题6. 使用udp传输数据的系统就一定不可靠吗&#xff1f;7. 基于UDP的主机探活 python实现 1. 简介 User Datagram Protocol&#xff0c;用户数据报协议&#xff0c;基于IP协议提供面向无连接的网…

使用 three.js 渲染个blender模型

首先需要一个扫描模型&#xff0c;工业上有专门的设备去采集模型的面然后通过建模软件去处理外表面贴图 我们这里取了一个ford汽车的发动机模型 为了让three.js能够使用&#xff0c;使用blender把模型保存为glb格式 为了让页面加载glb模型更快&#xff0c;需要对模型文件进行压…

jade 0919 | 提取自TVBox的直播盒子,频道丰富高清

jade电视直播app覆盖央视全频道和各大卫视&#xff0c;各地地方台也能一网打尽&#xff0c;随时随地看高清电视。各卫视台覆盖广泛&#xff0c;包括浙江电视台、湖南卫视、江苏卫视、东方卫视等全部卫视台&#xff0c;最新内容先一步掌握。拥有广东、北京、风云足球等热播体育频…

Oracle视频基础1.3.2练习

1.3.2 看 Oracle 实例是否启动 ps -ef | grep oracle备份已有的数据库文件到 old 文件夹&#xff0c;用 sample pfile 手动创建新的数据库文件 pfile mkdir old,mv * old,ls,cd old,cp init.ora …/initwilson.ora编辑 pfile&#xff0c;修改 db_name&#xff0c;db_block_siz…

“中信同业+”焕新升级 锚定数字金融新主线,做实金融“五篇大文章”

9月20日&#xff0c;“中信同业”升级发布会及生物多样性债券指数发布在京顺利举办&#xff0c;此次活动以“做强数字金融 服务实体经济”为主题&#xff0c;由中信金控指导&#xff0c;中信银行主办&#xff0c;中信各金融子公司联合承办。来自银行、证券、保险、基金等行业百…

重学SpringBoot3-Spring WebFlux之HttpHandler和HttpServer

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-Spring WebFlux之HttpHandler和HttpServer 1. 什么是响应式编程&#xff1f;2. Project Reactor 概述3. HttpHandler概述3.1 HttpHandler是什么3.2 Http…

全桥PFC电路及MATLAB仿真

一、PFC电路原理概述 PFC全称“Power Factor Correction”&#xff08;功率因数校正&#xff09;&#xff0c;PFC电路即能对功率因数进行校正&#xff0c;或者说是能提高功率因数的电路。是开关电源中很常见的电路。功率因数是用来描述电力系统中有功功率&#xff08;实际使用…

【音视频 | ADPCM】音频编码ADPCM详细介绍及例子

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

python读取视频并转换成gif图片

1. 安装三方库 moviepy 将视频转换成gif&#xff0c;需要使用 moviepy库 确保已经安装了moviepy库 pip install moviepy2. 代码实现&#xff1a; from moviepy.editor import VideoFileClipmyclip VideoFileClip("video.mp4") myclip2 myclip.subclip(0, 10).re…

人工智能原理实验二:搜索方法

一、实验目的 本实验课程是计算机、智能、物联网等专业学生的一门专业课程&#xff0c;通过实验&#xff0c;帮助学生更好地掌握人工智能相关概念、技术、原理、应用等&#xff1b;通过实验提高学生编写实验报告、总结实验结果的能力&#xff1b;使学生对智能程序、智能算法等…

在Centos7.9服务器上使用LVM方式挂载磁盘以及Windows磁盘性能测试与Linux磁盘性能测试命令hdparm详细

一、在Centos7.9服务器上使用LVM方式挂载磁盘 在磁盘分区挂载之前&#xff0c;先使用lsblk命令查看磁盘信息&#xff0c;未分区挂载的磁盘sdb只有disk类型没有part类型。40G的硬盘sda已经分了两个区sda1、sda2。而sdb磁盘下并没有分区信息&#xff0c;说明还没有分区。磁盘分区…

dicom基础:乳腺影像方位信息介绍

目录 一、轴位 (CC, Craniocaudal) 二、侧位 (Lateral) 三、侧斜位 (MLO, Mediolateral Oblique) 四、不同的拍摄方位的乳腺影像展示 1、RCC&#xff08;Right Craniocaudal&#xff09; 2、LCC&#xff08;Left Craniocaudal&#xff09; 3、RMLO&#xff08;Right Medio…

uniapp 报错Invalid Host header

前言 在本地使用 nginx 反向代理 uniapp 时&#xff0c;出现错误 Invalid Host header 错误原因 因项目对 hostname 进行检查&#xff0c;发现 hostname 不是预期的&#xff0c;所以&#xff0c;报错 Invalid Host header 。 解决办法 这样做是处于安全考虑。但&#xff0…