提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 / cover / contain 值 )

网页概念基础 设置 移动 图像 布局 同时
2023-06-13 09:18:50 时间

一、背景图像缩放

盒子模型 的 背景图片尺寸 是通过 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>

显示效果 :

相关文章