【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 / cover / contain 值 )
【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 / cover / contain 值 )
韩曙亮
发布于 2023-04-24 11:35:11
发布于 2023-04-24 11:35:11
一、背景图像缩放
盒子模型 的 背景图片尺寸 是通过 background-size 属性 设置的 , 语法如下 :
background-size: 背景图片宽度 背景图片高度;background-size 可设置的值 :
- 像素长度 : 单位 像素 px ;
- 百分比长度 : 百分比是 相对于父容器你的百分比 ;
- cover 值 : 等比例拉伸背景图像 , 使得背景图片完全覆盖背景区域 , 图片的部分内容可能显示不全 ;
- contain 值 : 等比例拉伸背景图像 , 使得 宽度 或 高度 的其中一个达到父容器的尺寸 , 就不再进行拉伸 , 盒子模型部分内容可能显示空白 ;
background-size 值设置一个值的情况 :
- 只设置宽度像素值 : 宽度设置为 500 像素 , 高度根据该宽度等比例缩放 ;
background-size: 500px;- 只设置宽度百分比值 : 宽度占父容器的 100% , 高度根据该宽度等比例缩放 ;
background-size: 100%;二、代码示例
1、不设置 background-size 的默认状态
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图像缩放</title>
<style>
div {
width: 400px;
height: 400px;
border: 2px solid black;
background: url(images/bg.jpg) no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>显示结果 :
2、宽高不等比例拉伸 - 同时设置 宽度 / 高度 的 像素值 / 百分比值
如果为盒子模型 同时设置了 宽度 和 高度 像素值 , 则 图片的宽度和高度分别进行拉伸 , 以达到样式中定义的宽高值 , 宽高不会等比例拉伸 ;
/* 宽高不等比例拉伸 */
background-size: 400px 400px;或
/* 宽高不等比例拉伸 */
background-size: 100% 100%;代码示例 :
- 设置 宽度 和 高度 的像素值 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图像缩放</title>
<style>
div {
width: 400px;
height: 400px;
border: 2px solid black;
background: url(images/bg.jpg) no-repeat;
/* 宽高不等比例拉伸 */
background-size: 400px 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>- 设置 宽度 和 高度 的百分比值 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图像缩放</title>
<style>
div {
width: 400px;
height: 400px;
border: 2px solid black;
background: url(images/bg.jpg) no-repeat;
/* 宽高不等比例拉伸 */
background-size: 100% 100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>显示效果 :
3、宽高等比例拉伸 - 只设置 宽度 的 像素值 / 百分比值
代码示例 :
- 设置宽度百分比值 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图像缩放</title>
<style>
div {
width: 400px;
height: 400px;
border: 2px solid black;
background: url(images/bg.jpg) no-repeat;
/* 宽高等比例拉伸 - 设置宽度百分比值 */
background-size: 100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>- 设置宽度的像素值 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图像缩放</title>
<style>
div {
width: 400px;
height: 400px;
border: 2px solid black;
background: url(images/bg.jpg) no-repeat;
/* 宽高等比例拉伸 - 设置宽度像素值 */
background-size: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>显示效果 :
4、宽高等比例拉伸 - 设置 cover 完全覆盖盒子模型
在本示例中 , 一直拉伸 , 直到高度覆盖住盒子模型 , 此时宽度已经远远超过模型很多 , 部分内容没有显示 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图像缩放</title>
<style>
div {
width: 400px;
height: 400px;
border: 2px solid black;
background: url(images/bg.jpg) no-repeat;
/* 宽高等比例拉伸 - 设置 cover 完全覆盖盒子模型 */
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>显示效果 :
5、宽高等比例拉伸 - 设置 contain 在宽度或高度一个方向上充满父容器
本示例中 , 拉伸背景图片时 , 宽度先充满了屏幕 , 就停止了拉伸 , 底部部分内容没有覆盖到 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图像缩放</title>
<style>
div {
width: 400px;
height: 400px;
border: 2px solid black;
background: url(images/bg.jpg) no-repeat;
/* 宽高等比例拉伸 - 设置 contain 在宽度或高度一个方向上充满父容器 */
background-size: contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>显示效果 :
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-04-23，如有侵权请联系 cloudcommunity@tencent.com 删除
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号