How to control image width with css-CSS Tutorial-php.cn

How to control image width with css

青灯夜游

Release： 2023-01-03 09:25:07

Original

4705 people have browsed it

In CSS, if it is an img image, you can use the width attribute to control the image width, such as "img{width:100px;}"; if it is a background image, use the background-size attribute to control the image width. , the syntax is "background-size:width-height;".

How to control image width with css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Use the img image--use the width attribute

How to control image width with css tag to define the image in the HTML page. The width attribute sets the width of the element.

Example:

<!DOCTYPE html>
<html>

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

	<body>
		<p>
		原始尺寸：<img  src="img/2.jpg" alt="How to control image width with css" >
		</p>
		<p>
		修改后的尺寸：<img  class="img2" src="img/2.jpg" alt="How to control image width with css" >
		</p>
	</body>

</html>

Copy after login

Rendering:

How to control image width with css

##[Recommended tutorial:

CSS video tutorial】

2. Background image--use the background-size attribute

background-size attribute to specify the size of the background image.

Grammar

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

Copy after login

How to control image width with css

Example:

<!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"    style="max-width:90%">
		</p>

	</body>

</html>

Copy after login

Rendering:

How to control image width with css

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of How to control image width with css. For more information, please follow other related articles on the PHP Chinese website!