css如何控制图片宽度-css教程-PHP中文网

css如何控制图片宽度

青灯夜游

发布： 2021-02-24 11:50:12

原创

5043人浏览过

在css中，如果是img图片，可以使用width属性来控制图片宽度，例“img{width:100px;}”；如果是背景图片，则使用background-size属性来控制图片宽度，语法“background-size:宽度高度;”。

css如何控制图片宽度

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

1、使用img图片--使用width属性

css如何控制图片宽度标签定义 HTML 页面中的图像。而width属性设置元素的宽度。

示例：

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.img2{
				width: 200px;
			}
		</style>
	</head>

	<body>
		<p>
		原始尺寸：@@##@@
		</p>
		<p>
		修改后的尺寸：@@##@@
		</p>
	</body>

</html>

登录后复制

效果图：

css如何控制图片宽度

【推荐教程：CSS视频教程】

2、背景图片--使用background-size属性

西政科技企业网站管理系统 5.1 黄金版

更大程度上拓宽了用户的权利，您可以自由设置页面的显示方式（flash界面和图片界面），让您的网站更大气，更显示设计水平，系统的功能完全由用户控制，您自行决定是否需要会员注册系统和会员在线购买功能，产品的管理更加人性化，所有产品系列全部后台管理，全部2级，1级分类自由选择，企业简介，产品展示，联系我们，在线反馈，在线购买，营销网络等栏目您自己决定取舍，全部页面和全部调用数据您自己决定是否采用

查看详情

background-size属性指定背景图片大小。

语法

background-size: length|percentage|cover|contain;

登录后复制

css如何控制图片宽度

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			body {
				background: url(img/1.jpg);
				background-size: 80px 60px;
				background-repeat: no-repeat;
				padding-top: 40px;
			}
		</style>
	</head>

	<body>

		<br /><br />
		<p>原始图片: <br />
			@@##@@
		</p>

	</body>

</html>

登录后复制

效果图：