CSS图片缩放.pdf资源-CSDN文库

版权申诉

124 浏览量 2022-07-10 12:18:53 上传评论收藏 323KB PDF 举报

资源推荐

资源详情

资源评论

C SS图片缩放

本文来自刘玉红《HTML5+CSS3+JavaScript网页设计案例课堂》清华大学出版社 2015年

摘要：本文档主要介绍三种图片缩放的基本方法和具体的应用。

关键词：CSS5图片5缩放

网页上显示一张图片时，默认情况下都是以图片的原始大小显示。如果要对网页进行排版，通常情

况下，还需要对图片进行大小的重新设定。如果对图片设置不恰当，会造成图片的变形和失真，所以一

定要保持宽度和高度属性的比例适中。对于图片大小设定，可以采用三种方式来完成。

1 通过描述标记width和height缩放图片

在 HTML 标记语言中，通过 img 的描述标记 width 和 height 可以设置图片的大小。 width 和

height 分别表示图片的宽度和高度，可以是数值或百分比，单位可以是 px。需要注意的是，高度属性

height 和宽度属性 width 的设置方式要求相同。

案例 1：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>缩放图片<#title>

<#head>

<body>

<img src="01.jpg" width=200 height=120>

<#body>

<#html>

在 Chrome 浏览器中运行效果如图 1 所示，可以看到，网页显示了一张图片，其宽度为 200px,高

度为 120 像素。

图 1 使用标记来缩放图片

2 使用CSS中的max-width和max-height缩放图片

max-width 和 max-height 分别用来设置图片宽度最大值和高度最大值。在定义图片大小时，如果

图片默认尺寸超过了定义的大小，就以 max-width 所定义的宽度值显示，而图片高度将同比例变化，

如果定义的是 max-height，以此类推。但是，如果图片的尺寸小于最大宽度或者高度，那么图片就按

原尺寸大小显示。max-width 和 max-height 的值一般是数值类型。

其语法格式举例如下：

img {

max-height: 180px;

}

1 / 3

CSS 图片缩放

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

版权申诉

努力搬砖的小王

粉丝: 16
资源: 7706

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip