图片等比例缩放方案
时间:2022-07-24
本文章向大家介绍图片等比例缩放方案,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
图片等比例缩放方案
在Web
开发时无可避免的需要将图片进行缩放,缩放时需要保证图片不变形,也就是需要等比例缩放。
设定宽度或高度
引入图片时,仅设置图片的width
或者是height
就可以使另一边自适应,从而实现等比例缩放。
<section>
<img id="t1" src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
<img id="t2" src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg">
</section>
<style type="text/css">
#t1{
width: 500px;
}
#t2{
height: 300px;
}
</style>
设定最大宽度或最大高度
引入图片时,仅设置图片的max-width
或者是max-height
就可以使另一边自适应,从而实现等比例缩放。
<section>
<img id="t3" src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
<img id="t4" src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
</section>
<style type="text/css">
#t3{
max-width: 500px;
}
#t4{
max-height: 300px;
}
</style>
根据父容器适应
将图片设定为max-width: 100%;
与max-height: 100%;
,就可以自适应父容器宽高进行等比缩放。
<section>
<div id="t5">
<img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
</div>
</section>
<style type="text/css">
#t5{
height: 300px;
width: 600px;
border: 1px solid #eee;
display: flex;
justify-content: center;
}
#t5 > img{
max-width: 100%;
max-height: 100%;
}
</style>
使用Js设定宽高
使用JavaScript
预先取得图片并根据指定的高度或者是宽度计算缩放比,从而计算出另一边的长度,设定好宽高后加入文档。
<section>
<div id="t6"></div>
</section>
<script type="text/javascript">
var img = new Image();
var height = 300;
img.src = "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg";
img.onload = function(){
var scale = height / this.height;
this.height = height;
this.width = this.width * scale;
document.getElementById("t6").appendChild(this);
}
</script>
使用CSS背景属性
使用CSS
的background
属性进行等比缩放。
<section>
<div id="t7"></div>
</section>
<style type="text/css">
#t7{
height: 300px;
width: 600px;
border: 1px solid #eee;
background: url("http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg") center center no-repeat;
background-size: contain;
}
</style>
使用CSS转换属性
使用CSS
的transform
属性直接进行缩放。
<section>
<div id="t8">
<img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
</div>
</section>
<style type="text/css">
#t8{
height: 300px;
width: 500px;
overflow: hidden;
}
#t8 > img{
transform: scale(0.6);
transform-origin: 0 0;
}
</style>
使用CSS适应属性
使用CSS
的object-fit
属性直接进行图片适应缩放。
<section>
<div id="t9">
<img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
</div>
</section>
<style type="text/css">
#t9{
height: 300px;
width: 600px;
border: 1px solid #eee;
display: flex;
justify-content: center;
}
#t9 > img{
object-fit: contain;
}
</style>
代码示例
<!DOCTYPE html>
<html>
<head>
<title>图片等比例缩放</title>
<style type="text/css">
#t1{
width: 500px;
}
#t2{
height: 300px;
}
#t3{
max-width: 500px;
}
#t4{
max-height: 300px;
}
#t5{
height: 300px;
width: 600px;
border: 1px solid #eee;
display: flex;
justify-content: center;
}
#t5 > img{
max-width: 100%;
max-height: 100%;
}
#t7{
height: 300px;
width: 600px;
border: 1px solid #eee;
background: url("http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg") center center no-repeat;
background-size: contain;
}
#t8{
height: 300px;
width: 500px;
overflow: hidden;
}
#t8 > img{
transform: scale(0.6);
transform-origin: 0 0;
}
#t9{
height: 300px;
width: 600px;
border: 1px solid #eee;
display: flex;
justify-content: center;
}
#t9 > img{
object-fit: contain;
}
</style>
</head>
<body>
<section>
<img id="t1" src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
<img id="t2" src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg">
</section>
<section>
<img id="t3" src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
<img id="t4" src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
</section>
<section>
<div id="t5">
<img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
</div>
</section>
<section>
<div id="t6"></div>
</section>
<section>
<div id="t7"></div>
</section>
<section>
<div id="t8">
<img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
</div>
</section>
<section>
<div id="t9">
<img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
</div>
</section>
</body>
<script type="text/javascript">
var img = new Image();
var height = 300;
img.src = "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg";
img.onload = function(){
var scale = height / this.height;
this.height = height;
this.width = this.width * scale;
document.getElementById("t6").appendChild(this);
}
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- shell脚本快速入门之-----深入介绍Expect免交互
- shell脚本快速入门之-----Here document使用方法总结
- spring框架应用系列一:annotation-config自动装配
- 弄它!!!2020年了你还不懂ACL嘛,小编带你走进ACL的世界,分分钟搞定!!!
- jsp实用过滤器写法
- 搞它!!! Linux 查看CPU信息,机器型号,内存等信息
- shell脚本快速入门之----sort、uniq和tr
- 社区开源框架网络模块:ConnectionManager详解
- 搞它!!!Linux--深入介绍firewalld防火墙管理工具
- 搞它!!! 深入介绍iptables防火墙管理工具
- ZooKeeper的十二连问,你顶得了嘛?
- 手把手教你,嘴对嘴传达----Apache虚拟主机配置与应用
- 手把手教你,嘴对嘴传达----Apache的访问控制
- spring框架应用系列二:component-scan自动扫描注册装配
- 手把手教你,嘴对嘴传达------Apache日志管理日志(rotatelogs分割工具、AWStats日志分析)