图片的宽高设置及背景图片的相关属性

最新推荐文章于 2024-08-15 18:15:00 发布

little_little0_0

最新推荐文章于 2024-08-15 18:15:00 发布

阅读量6.9k

点赞数 3

分类专栏： HTML&CSS基础文章标签： html css

本文链接：https://blog.csdn.net/little_little0_0/article/details/78258422

版权

HTML&CSS基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

图片的宽高设置及使用老是记不住，今天来总结一下，方便以后使用。我们今天用到的图片如下（原始尺寸：500*375）：

首先，我们说说<img>这个元素。它是一个行内元素，自带width和height属性。width和height的像素值可随意设置，不受原始大小，原始比例和父元素宽高的影响。当width和height的值取百分数时，表示占父元素宽高的百分比。如果父元素只设置了其中一个值（width或height），则按照确定的那个设置百分比，另一个属性根据图片自身的比例自适应。如父元素的宽高都没有设置，则逐层向上寻找设置了宽度的父元素，计算得出width值，height值自适应。通过<img>的align属性可以设置图片图片的对齐方式。通过外联方式或是运用style属性设置宽高，与上述情况一致。举个例子吧！

<!doctype html>
<head>
    <meta charset="UTF-8"/>
    <title>图片的宽高设置</title>
</head>
<body>
<div style="height: 400px; overflow: hidden">
<div style="background-color: pink;">
    <img src="../images/flower.jpg" width="20%" height="50%" />
</div>
</div>
</body>
</html>

这个示例的显示效果为：

上面讲的是通过<img>元素将图片插入到文档流中，图片还可以作为其他元素（包括块级元素和内联元素）的背景。通过background-image:url(...);来引入背景图片。默认从左上角沿x方向和y方向进行平铺。例如：

<!doctype html>
<head>
    <meta charset="UTF-8"/>
    <title>图片的宽高设置</title>
</head>
<body style="background-image: url('../images/flower.jpg')">
</body>
</html>

效果如下：

那如果我们不希望它重复，或者只想让它在一个方向上重复呢？我们可以运用background-repeat这个属性，它有五个值：repeat(默认值)，repeat-x（水平方向重复），repeat-y（垂直方向重复），no-repeat（不重复），inherit（继承）。那如果我们不想背景图片从左上角开始呢？我们可以利用background-position来设置；

如background-position：center;（中心对齐）backgroud-position:tight top;(右上角).我们还可以设置具体的值，如background-position:100px 20px;（距左侧100px，距上侧20px）；当具体数值为百分比时，百分数既适用于元素本身，也适用于图片。如background-position:100% 0%;表示图像中描述为100% 0%的点与元素中描述为100% 0%的点对齐。如果我们的文档很长，那么在刚打开网页时背景图片可能会不可见，或者随页面滚动而消失。如果我们想让背景图片一直留在可视区，那么就可以使用background-attached属性，设置背景图像是否固定或者随着页面的其余部分滚动。可取值：scroll（随页面滚动），fixed（位置固定），inherit（继承）。

以上介绍的属性都可以写到background这个简写属性中，且可采用任何顺序。讲了这么多都是对背景图片位置的的设定，那么可以用css操纵图片的大小吗？当然是可以的。CSS3中的background-size属性就实现了这一功能。无论把它的值设置为像素或是百分比都与上述图片的宽高设置表现效果一致。若大小超出容器，则超出部分会被自动隐藏。它还有两个特殊的属性值，cover和contain。如果图像的宽高比例和元素的宽高比例不一样的话，使用cover会使一边占满，一边超出，超出部分隐藏；contain会使一边占满，一边留白。例如：

<!doctype html>
<head>
    <meta charset="UTF-8"/>
    <title>图片的宽高设置</title>
</head>
<body>
<div style="width: 400px; height: 400px;
background-image: url('../images/flower.jpg');
background-size: contain;
background-repeat: no-repeat;
background-color: pink;
float: left">
</div>

<div style="width: 400px; height: 400px;
     background-image: url('../images/flower.jpg');
     background-size: cover;
     background-repeat: no-repeat;
     background-color: pink;
     margin-left: 20px;
     float: left">
</div>

</body>
</html>

效果如图：