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

技术标签： css  web 前端学习  # CSS  html  css3  

图片缩放

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
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43960383/article/details/125323947

智能推荐

如何打开虚拟机服务器,虚拟机怎么打开ssh服务器-程序员宅基地

文章浏览阅读1.1k次。虚拟机怎么打开ssh服务器 内容精选换一换本手册介绍如何安装Mind Studio以及安装过程中的故障处理方法。Mind Studio只能安装在Ubuntu服务器上，可以在Ubuntu服务器上使用原生桌面自带的终端gnome-terminal进行安装，也可以在Windows服务器上通过SSH登录到Ubuntu服务器进行安装，因为Mind Studio是一款GUI程序，所以在Win本节操作介绍在Wi..._虚拟机如何进入ssh

【雕爷学编程】Arduino 手册之三角函数 sin()_arduino sin-程序员宅基地

文章浏览阅读928次，点赞3次，收藏11次。sin() 是 Arduino 数学库中的一个函数，它的作用是计算一个角度的正弦值。Arduino 2005 年时面世，作为意大利伊夫雷亚地区伊夫雷亚互动设计研究所的学生设计，目的是为新手和专业人员提供一种低成本且简单的方法，以建立使用传感器与环境相互作用的装置。可以使用 sin() 函数和反正弦函数 asin() 来计算每秒钟物体沿着圆周移动的弧长对应的弧度值，然后除以 PI 得到相对于圆心的角度变化。在使用sin()函数计算角度的正弦值时，确保输入的角度值在正确的范围内。_arduino sin

用Servlet+jsp+mysql写项目时，使用C3p0连接池连接数据库，启动服务出现以下错误：mysql APPARENT DEADLOCK!!!-程序员宅基地

文章浏览阅读566次。用Servlet+jsp+mysql写项目时，使用C3p0连接池连接数据库，启动服务出现以下错误：mysql APPARENT DEADLOCK!!!控制台出现的异常如下：com.mchange.v2.async.ThreadPoolAsynchronousRunner$DeadlockDetector@536b0935 – APPARENT DEADLOCK!!! Complete Stat..._mysql apparent deadlock

【计算机考研】 408大题怎么复习最有效？看这一篇！_408大题怎么准备-程序员宅基地

文章浏览阅读882次，点赞8次，收藏23次。24变化较大的是选择题，出现了很多冷门知识点。当然，考试不是一成不变的。时间长了，考试的形式、内容都会变。光靠过去的题目，有可能漏掉新题型，到时候就傻眼了。考研408大题虽然整体来看难度和往年相识，但是每年还是会出一些新考点，例如今年的计网BGP,所以最重要的还是掌握知识点。再说了，考试可不只是考你知识储备，更考的是综合能力和解题方法。这些东西可不是光靠做题就能练出来的，得花点心思，多想想，多琢磨琢磨。光凭做真题，你可别指望能应付得了所有情况。总的来说，真题固然重要，但可不能当成唯一标准。_408大题怎么准备

使用 for 和 mv 批量修改文件名_mv批量修改文件名-程序员宅基地

文章浏览阅读375次。命令一次只能操作一个文件或者目录，如果现在我有好几个文件甚至好几百个文件需要处理，是不是就不能用。（这里只有 9 个文件，想一个一个修改也不是不可以。稍微修改一下上面的指令，使输出的文件名转换成指定的格式，即把文件名中的。命令，允许用户创建一个遍历一系列值的循环，以此来重复执行一系列命令。参数不是必须的，完全可以省略，只是为了跟直观地看一下修改的过程而已。编辑器可以根据命令来处理数据流中的数据，这正是我们所需要的。先看测试目录下的文件，这里有 9 个。的文件，需要把他们的文件名都改成。_mv批量修改文件名

CodeForces 554C 组合数学_codeforces 554c a题-程序员宅基地

文章浏览阅读469次。题意K种不同颜色的N个球，要求每种颜色最后一个球的位置必须按照顺序来。求有多少种排列方法。题解排列规则比较简单，首先放最后一个球，这个球一定放在最后一个空位，放完最后一个球之后，其他的a[i]-1个球随便放。按照排列规则计算一下即可。这里用到了一个小技巧，组合数打表。感觉还是挺实用的。代码#include #include#include#_codeforces 554c a题

随便推点

C语言经典算法之哈希查找_编写函数实现按关键字进行哈希查找,记录比较次数。若查找成功返回哈希表中的位置,-程序员宅基地

文章浏览阅读774次，点赞19次，收藏25次。哈希查找是一种高效的数据检索技术，它利用哈希函数将数据映射到一个固定大小的数组（即哈希表）中。_编写函数实现按关键字进行哈希查找,记录比较次数。若查找成功返回哈希表中的位置,

printf的实现，my_printf_my_printf.h-程序员宅基地

文章浏览阅读623次。1 #ifndef __PRINT_H_ 2 #define __PRINT_H_ 3 4 void print(char* fmt, ...); 5 void printch(char ch); 6 void printdec(int dec); 7 void printflt(double flt); 8 void printbin(_my_printf.h

LUA教程算术运算的Metamethods-52_bad argument #1 to 'pairs-程序员宅基地

文章浏览阅读1.7k次。这一部分我们通过一个简单的例子介绍如何使用metamethods。假定我们使用table来描述结合，使用函数来描述集合的并操作，交集操作，like操作。我们在一个表内定义这些函数，然后使用构造函数创建一个集合：Set = {}function Set.new (t) local set = {} for _, l in ipairs(t) do set[l] = true end return setend function Set.union (a,b) .._bad argument #1 to 'pairs

微信小程序ar识别_微信小程序识别物品弹出ar动画-程序员宅基地

文章浏览阅读836次。ar识别示例库代码片段_微信小程序识别物品弹出ar动画

深度学习之基本概论(1)-程序员宅基地

文章浏览阅读321次，点赞4次，收藏3次。深度学习是学习样本数据的内在规律和表示层次，这些学习过程中获得的信息对诸如文字，图像和声音等数据的解释有很大的帮助。深度学习在搜索技术，数据挖掘，机器学习，机器翻译，自然语言处理，多媒体学习，语音，推荐和个性化技术，以及其他相关领域都取得了很多成果。深度学习(DL, Deep Learning)是机器学习(ML, Machine Learning)领域中一个新的研究方向，它被引入机器学习使其更接近于最初的目标——人工智能(AI, Artificial Intelligence)。

C++编译器优化问题-程序员宅基地

文章浏览阅读1k次。首先使用a拷贝构造了形参aa，然后aa拷贝构造了copy1，copy1拷贝构造了copy2（注意这里虽然是等号也是拷贝构造，因为这里的copy2还是对象创建初始化阶段，只有对象创建出来之后再给对象赋值才是赋值）copy2拷贝构造了一个临时对象然后传参给test，使用这个临时对象1拷贝构造了aa然后aa重复上面再函数中的拷贝构造，返回值，因为是值返回所以先再main函数的栈帧内开辟一个临时对象2，调用了一次拷贝构造，然后再用哦这个临时对象2，拷贝构造了ret对象。所以编译器进行了优化，那么优化的地方在哪呢？._c++编译器优化

推荐文章

热门文章

相关标签