• 技术文章 >web前端 >css教程

    css如何控制图片宽度

    青灯夜游青灯夜游2021-02-24 11:50:12原创104

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

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

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

    <img> 标签定义 HTML 页面中的图像。而width属性设置元素的宽度。

    示例:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			.img2{
    				width: 200px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<p>
    		原始尺寸:<img src="img/2.jpg">
    		</p>
    		<p>
    		修改后的尺寸:<img class="img2" src="img/2.jpg">
    		</p>
    	</body>
    
    </html>

    效果图:

    3.png

    【推荐教程:CSS视频教程

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

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

    语法

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

    2.png

    示例:

    <!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 />
    			<img src="img/1.jpg" alt="Flowers" width="224" height="162">
    		</p>
    
    	</body>
    
    </html>

    效果图:

    1.png

    更多编程相关知识,请访问:编程入门!!

    以上就是css如何控制图片宽度的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css 图片宽度
    上一篇:css怎么把字体颜色改为白色 下一篇:什么是CSS,其主要作用是什么
    第15期线上培训班

    相关文章推荐

    • 在css中float属性的属性值有哪些• CSS层样式表有哪几种类型• 深入了解CSS属性*-gradient的使用技巧• 一起看看JavaScript与CSS和Sass如何进行交互• 使用CSS3实现简单时间轴效果(附代码)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网