Rumah >hujung hadapan web >tutorial css >css图片大小如何设置
css图片大小如何设置
- coldplay.xixiasal
- 2021-04-28 15:58:3145224semak imbas
css图片大小的设置方法：1、通过img标签引入的图片大小设置，语法为【img{width:150px;height:60px}】；2、使用【background-size】属性规定背景图像的尺寸。
本教程操作环境：windows7系统、css3版，DELL G3电脑。
css图片大小的设置方法：
一、通过img标签引入的图片大小设置
我们可以直接在图片标签设置宽度width和高度height，这里需要注意的是HTML img标签内直接设置宽度和高度值不需要html单位，默认为PX像素。
img标签内设置高度宽度优点直观，对于文章内插入图片可以利用此方法控制设置图片高度宽度；缺点，如果图片列表排版的这样会增加很多HTML代码，不便统一修改。
css设置img图片大小语法：
img{width:150px;height:60px}这里设置CSS宽度为150px,css高度为60px,注意是CSS样式中css width和css height的值都带单位也要记住一定带上单位。
如果是我们直接对img设置样式，这样会将整个网页中图片宽度高度控制了。为了控制指定对象内的图片宽度高度样式，我们通常在img前加上对象CSS命名。
二、css设置背景图片大小：
background-size 属性规定背景图像的尺寸。
语法：
background-size: length|percentage|cover|contain;
示例：
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p>
</body>
</html>效果图：
相关教程推荐：CSS视频教程
Atas ialah kandungan terperinci css图片大小如何设置. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css如何改变鼠标样式Artikel seterusnya：css如何改字体