CSS 3之图片缩放_css图片缩放-程序员宅基地

图片缩放

1. 通过标记设置图片大小
2. CSS 3中的 width 和 height
3. CSS 3 中的 max-width 与 max-height

1. 通过标记设置图片大小

使用 img 的描述标记 height 和 width 能设置图片大小；
height 和 width 分别表示图片的高度和宽度，可以是数值或百分比，单位可以用 px，也可以是**%、em、pt**；
注意： 高度属性是height和宽度属性 width 设置要求相同；
例子1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片大小</title>
	</head>
	<body>
		<img src="3.jpg" width="300" height="200"/>
	</body>
</html>

20220504

2. CSS 3中的 width 和 height

CSS 3 中，可使用属性 width 和 height 设置图片的宽度和高度，以此达到图片的缩放效果；

例子 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片大小</title>
	</head>
	<body>
		<img src="3.jpg"/>
		<img src="3.jpg" style="width: 145px;height: 145px;"/>
	</body>
</html>

20220504

3. CSS 3 中的 max-width 与 max-height

CSS 3 中，max-width 和 max-height 用来设置图片宽度最大值和高度最大值；
max-width 和 max-height的值一般是数值类型；
语法格式如下所示：

img {
    
	max-height:180px
}

或

style="max-width:100px;"

在定义图片大小时，若图片默认尺寸超过了定义的大小，就以 max-widht 所定义的宽度显示，二图片高度将同比例变化；若定义的是 max-height ，就是图片的最高高度；
但若图片的尺寸小于最大宽度或高度，图片将按原尺寸大小显示；

例子 3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片大小</title>
	</head>
	<body>
		图片默认的尺寸超过了定义大小的效果：<br />
		<img src="3.jpg" style="max-width: 180px;"/><br />
		图片默认的额尺寸小于定义大小的效果图：<br />
		<img src="3.jpg" style="max-width: 500px;"/>
	</body>
</html>

20220504

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125323947

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

.net引用DLL出错_.net 发布分程序值使用dll方法,报错-程序员宅基地

文章浏览阅读747次。最近把WIN7 32位换成64位，重新运行以前编译的程序时报错：“System.Runtime.InteropServices.SEHException”类型的未知错误检查后发现程序是在调用DLL一个函数时报错不得其解，执行另一函数时又报了“Error Loading MIDAS.DLL”，感觉有戏于是下了64位的MIDAS.DLL，放在C:\Windows\SysWOW6_.net 发布分程序值使用dll方法,报错

DevExpress关于正版和非正版的运行以及发布的问题_devexpress23.2激活-程序员宅基地

文章浏览阅读283次。DevExpress关于正版和非正版的运行以及发布的问题。_devexpress23.2激活

Sql server 使用DBCC Shrinkfile 收缩日志文件-程序员宅基地

文章浏览阅读795次。Sql server 使用DBCC Shrinkfile 收缩日志文件_dbcc shrinkfile 收缩日志

生产计划管理软件有哪些？哪个好_生产计划执行管理有什么目的和意义-程序员宅基地

文章浏览阅读3.6k次。生产计划管理软件有哪些？哪个好？生产计划管理，一般是指企业对生产活动的计划、组织和控制工作。生产计划管理软件可提高生产效率、提升品质、降低成本等。对企业管理意义深远。生产计划管理软件介绍：MES制造执行系统MES系统是一套面向制造企业车间执行层的生产信息化管理系统。是生产工业常见的生产管理软件，他可以为企业提供包括制造数据管理、计划生产调度管理、库存管理以及质量管理，同时还有人力资源管理..._生产计划执行管理有什么目的和意义

vue播放flv格式视频_vue flv-程序员宅基地

文章浏览阅读4.7k次，点赞3次，收藏11次。vue播放flv视频_vue flv

JPBC库的使用实例——BLS签名_it.unisa.dia.gas.jpbc.element-程序员宅基地

文章浏览阅读1.5k次。这里展示了一个简单的对JPBC库的调用的实例。可以参考JPBC库的官方文档进行学习：http://gas.dia.unisa.it/projects/jpbc/docs/ecpg.html#TypeAimport it.unisa.dia.gas.jpbc.Element;import it.unisa.dia.gas.jpbc.Field;import it.unisa.dia.gas.jpbc.Pairing;import it.unisa.dia.gas.jpbc.PairingParam_it.unisa.dia.gas.jpbc.element

随便推点

浅谈nacos脑裂-程序员宅基地

文章浏览阅读1.4k次。nacos 默认采集临时节点ephemeral，满足CAP中 AP原则，各节点是pear to pear 模式，相互直接无感知，因此对于一个集群来说，只要leader存活，即使其他所有follower全部down了，也能正常对外提供服务，基于此，nacos是可能产生脑裂的。follower无法与leader通信，因此会触发新的选举，投票满足过半数原则，因此能正常选举新的leader，且能正常对外提供服务；此时因为leader是状态正常，且与应用之间通信是正常的，因此仍能正常对外提供服务；_nacos脑裂