像uniapp image标签一样对图片进行缩放和裁剪

news2024/12/23 5:04:22

像uniapp image标签一样对图片进行缩放和裁剪

  • 0 前言提示
  • 1 实现
    • 1.1 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
    • 1.2 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
    • 1.3 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
    • 1.4 宽度不变,高度自动变化,保持原图宽高比不变
    • 1.5 高度不变,宽度自动变化,保持原图宽高比不变
    • 1.6 不缩放图片,只显示图片的不同区域
  • 2 完整代码

0 前言提示

在使用uniapp开发时觉着image标签的mode属性非常的使用,符合多种开发场景,并且最近有在整理object-fitobject-position的笔记,正好利用css属性按照image标签对于图片的缩放和裁剪处理,总结一套自己的经验。

在这里插入图片描述

模式说明
缩放scaleToFill不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
缩放aspectFill保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
缩放widthFix宽度不变,高度自动变化,保持原图宽高比不变
缩放heightFix高度不变,宽度自动变化,保持原图宽高比不变
裁剪top不缩放图片,只显示图片的顶部区域
裁剪bottom不缩放图片,只显示图片的底部区域
裁剪center不缩放图片,只显示图片的中间区域
裁剪left不缩放图片,只显示图片的左边区域
裁剪right不缩放图片,只显示图片的右边区域
裁剪top left不缩放图片,只显示图片的左上边区域
裁剪top right不缩放图片,只显示图片的右上边区域
裁剪bottom left不缩放图片,只显示图片的左下边区域
裁剪bottom right不缩放图片,只显示图片的右下边区域

1 实现

整体效果图
在这里插入图片描述

以下css全是设置给img标签的

1.1 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素

width: 200px;
height: 200px;
/* 核心 */
object-fit: fill;

1.2 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。

width: 200px;
height: 200px;
/* 核心 */
object-fit: contain;

1.3 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

width: 200px;
height: 200px;
/* 核心 */
object-fit: cover;

1.4 宽度不变,高度自动变化,保持原图宽高比不变

width: 200px;
height: auto;

1.5 高度不变,宽度自动变化,保持原图宽高比不变

width: auto;
height: 200px;

1.6 不缩放图片,只显示图片的不同区域

width: 200px;
height: 200px;
object-fit: none;
/* 核心 */
object-position: X轴位置 Y轴位置;

比如只显示图片的顶部区域object-position: center bottom;
比如只显示图片的左上边区域object-position: left top;
比如只显示图片的右下边区域object-position: right bottom;

2 完整代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            width: 900px;
            height: auto;
            display: grid;
            grid: auto-flow minmax(300px, max-content) / repeat(3, 300px);
            column-gap: 5px;
            row-gap: 20px;
            margin: 0 auto;
        }

        .box>div {
            display: grid;
            place-items: center;
            place-content: center;
            background: #000;
        }

        .box>div>span {
            color: #fff;
            min-height: 30px;
            text-align: center;
            margin-top: 10px;
        }

        .box>div>img {
            background: #aaa;
        }

        .basic {
            width: 200px;
            height: 200px;
        }

        .fixed-width {
            width: 200px;
            height: auto;
        }

        .fixed-height {
            height: 200px;
            width: auto;
        }

    </style>
</head>

<body>
    <div class="box">
        <div>
            <span>不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素</span>
            <img class="basic" src="./image/big.jpg" alt="" srcset="" style="object-fit: fill" />
        </div>
        <div>
            <span>保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来</span>
            <img class="basic" src="./image/big.jpg" alt="" srcset="" style="object-fit: contain" />
        </div>
        <div>
            <span>保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取</span>
            <img class="basic" src="./image/big.jpg" alt="" srcset="" style="object-fit: cover" />
        </div>
        <div>
            <span>宽度不变,高度自动变化,保持原图宽高比不变</span>
            <img class="fixed-width" src="./image/tall.jpg" alt="" srcset="" />
        </div>
        <div style="grid-column: 2 / span 2;">
            <span>高度不变,宽度自动变化,保持原图宽高比不变</span>
            <img class="fixed-height" src="./image/big.jpg" alt="" srcset="" />
        </div>
        <div>
            <span>不缩放图片,只显示图片的顶部区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: center top;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片,只显示图片的底部区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: center bottom;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片,只显示图片的中间区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: center center;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片,只显示图片的左边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: left center ;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片,只显示图片的右边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: right center;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片,只显示图片的左上边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: left top;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片,只显示图片的右上边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: right top;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片,只显示图片的左下边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: left bottom;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片,只显示图片的右下边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: right bottom;object-fit: none;" />
        </div>
    </div>
</body>

</html>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NCV7428D15R2G中文资料PDF数据手册参数引脚图图片价格概述参数芯片特性原理

产品概述&#xff1a; NCV7428 是一款系统基础芯片 (SBC)&#xff0c;集成了汽车电子控制单元 (ECU) 中常见的功能。NCV7428 为应用微控制器和其他负载提供低电压电源并对其进行监控&#xff0c;包括了一个 LIN 收发器。 产品特性&#xff1a; 控制逻辑3.3 V或5 V VOUT电源&…

JavaScript 使用 Promise 实现 sleep 休眠

以下为代码实现&#xff0c;该代码实现了每隔1秒打印一次当前时间&#xff0c;总共打印5次的功能 for(let i 1; i < 5; i){console.log(new Date().toString())await new Promise(resolve>setTimeout(resolve,1000)) }实现休眠的核心代码为: await new Promise(resolv…

挖掘网络宝藏:利用Scala和Fetch库下载Facebook网页内容

介绍 在数据驱动的世界里&#xff0c;网络爬虫技术是获取和分析网络信息的重要工具。本文将探讨如何使用Scala语言和Fetch库来下载Facebook网页内容。我们还将讨论如何通过代理IP技术绕过网络限制&#xff0c;以爬虫代理服务为例。 技术分析 Scala是一种多范式编程语言&…

在windows上安装Jenkins

jenkins安装 下载jenkins 官网&#xff1a;Jenkins download and deployment 官方文档说明&#xff1a;Jenkins User Documentation 安装jenkins1.点击下载好的安装包&#xff0c;点击Next 2.选择一个安装路径 如果系统是windows家庭版打不开策略就创建一个txt文件&#xff0c…

node.js常用的命令

Node.js 是一个用于执行 JavaScript 代码的运行时环境。以下命令是 Node.js 开发中常用的命令&#xff0c;可以帮助你进行包管理、项目配置和代码执行等操作。 node -v&#xff1a;检查 Node.js 的版本。npm -v&#xff1a;检查 npm&#xff08;Node.js 包管理器&#xff09;的…

企业工商年报注册注销商标注册异常处理小程序开源版开发

企业工商年报注册注销商标注册异常处理小程序开源版开发 1、独立业务模型包括&#xff1a;企业工商年报、企业工商登记注册、企业注销登记、企业异常处理。 2、通用业务模型适合各种业务&#xff0c;比如&#xff1a;商标注册代理、财务会计服务、企业版权登记登。 当然&…

2024 用CleanMyMac X为您的MAC清理提速吧

CleanMyMac X 是由 MacPaw 公司开发的一款针对 macOS 操作系统的电脑清理工具。它可以帮助用户清理电脑中的垃圾文件、卸载不需要的软件、优化电脑性能等。它的界面简洁明了&#xff0c;操作简单易懂&#xff0c;非常适合普通用户使用。 链接: https://pan.baidu.com/s/1_TFnrI…

Zookeeper(六)Zokeeper 使用场景案例

目录 一 数据发布/订阅1.1 配置变更1.2 代码实现1.3 启动测试 二 负载均衡2.1 实现2.2 代码2.3 启动测试 三 分布式ID3.1 代码实现3.2 效果 四 服务器集群监控五 分布式锁2.1 排他锁2.2 共享锁 官网&#xff1a;Apache ZooKeeper 一 数据发布/订阅 数据发布/订阅(Publish/Sub…

怎样修改grafana的Loading picture和加载的文本

登录装了grafana的linux机器 command “sudo vi /usr/share/grafana/public/views/index.html”&#xff0c;编辑配置文件。 找到.preloader__logo更改background-image. 这里可以是个url也可以是个路径。 如果想要更改加载的文字.可以更改 的内容 改完:wq保存以后退出&…

从键盘到屏幕:C语言中输入输出探秘

在编程中&#xff0c;输入和输出是我们与计算机交流的关键。无论是键盘输入还是屏幕输出&#xff0c;它们贯穿了我们每一行代码的编写。本文将带你深入探索C语言中输入输出的精彩世界&#xff0c;解锁其中的奥秘&#xff0c;助你轻松驾驭键盘和屏幕&#xff01;&#xff08;最后…

C++ List底层实现

文章目录 前言成员变量成员函数迭代器self& operator()前置self operator(int)后置self operator--()前置--self operator--(int)后置--bool operator!(const self & tmp)判断是否相等T* operator*() 解引用操作 list()初始化iterator begin()iterator end()const_iter…

年度告警分类统计

1、打开前端Vue项目kongguan_web&#xff0c;完成前端src/components/echart/YearWarningChart.vue页面设计 在YearWarningChart.vue页面添加div设计 <template><div class"home"><div style"margin: 0px auto;height: 100%"><div …

seleniumUI自动化实例(CSDN发布文章)

1.CSDN登陆成功后&#xff0c;点击发布 源码&#xff1a; #点击首页中的发布按钮 CSDNconf.driver.find_element(By.LINK_TEXT,"发布").click() time.sleep(15) 2.输入标题 #输入文章标题&#xff0c;标题格式“selenium UI自动化测试实例今天的日期” CSDNconf.d…

「数据分析」之零基础入门数据挖掘

摘要&#xff1a;对于数据挖掘项目&#xff0c;本文将学习应该从哪些角度分析数据&#xff1f;如何对数据进行整体把握&#xff0c;如何处理异常值与缺失值&#xff0c;从哪些维度进行特征及预测值分析&#xff1f; 探索性数据分析&#xff08;Exploratory Data Analysis&#…

期刊如何反击一波可疑图像

出版商正在部署基于人工智能的工具来检测可疑图像&#xff0c;但生成式人工智能威胁着他们的努力。 期刊正在努力检测用于分析蛋白质和DNA的凝胶的操纵图像。图片来源&#xff1a;Shutterstock 似乎每个月都会有一系列针对研究人员的新高调指控&#xff0c;这些研究人员的论文…

正则表达式具体用法大全

# 正则表达式&#xff1a; ## 单字符匹配&#xff1a; python # 匹配某个字符串&#xff1a; # text "abc" # ret re.match(b,text) # print(ret.group()) # 点&#xff08;.&#xff09;&#xff1a;匹配任意的字符(除了\n)&#xff1a; # text "\nabc&quo…

《论文阅读》带边界调整的联合约束学习用于情感原因对提取 ACL 2023

《论文阅读》带边界调整的联合约束学习用于情感原因对提取 前言简介Clause EncoderJoint Constrained LearningBoundary Adjusting损失函数前言 亲身阅读感受分享,细节画图解释,再也不用担心看不懂论文啦~ 无抄袭,无复制,纯手工敲击键盘~ 今天为大家带来的是《Joint Cons…

Photoshop 2024让图像处理更智能、更高效@

Photoshop 2024是一款功能强大的图像处理软件&#xff0c;广泛应用于创意设计和图像处理领域。它提供了丰富的绘画和编辑工具&#xff0c;包括画笔、铅笔、颜色替换、混合器画笔等&#xff0c;使用户能够轻松进行图片编辑、合成、校色、抠图等操作&#xff0c;实现各种视觉效果…

如何处理WordPress网站域名循环重定向

我在 HostEase 搭建了一个 WordPress 网站。在访问网站时出现了循环重定向的问题。经检查&#xff0c;发现是我在 .htaccess 文件中设置的重定向规则导致的。 重定向循环通常指的是一个网页或者URL地址在不断地进行重定向&#xff0c;最终形成一个循环&#xff0c;导致网页无法…

Monaco Editor系列(一)启动项目与入门示例解析

前言&#xff1a;作为一名程序员&#xff0c;我们工作中的每一天都在与代码编辑器打交道&#xff0c;相信各位前端程序员对 VS Code 一定都不陌生&#xff0c;VS Code 可以为我们提供代码高亮、代码对比等等功能&#xff0c;让我们在开发的时候&#xff0c;不需要对着暗淡无光的…