Can I use css for img elements?-Front-end Q&A-php.cn

Can I use css for img elements?

藏色散人

Release： 2022-12-30 11:11:28

Original

3211 people have browsed it

The img element can be styled using css. The setting method is: 1. Set the size of the img through attributes such as css width; 2. Use the border attribute of CSS to add a border to the img image; 3. Set the a tag to Set the image as a link; 4. Use the text-align attribute to set the horizontal alignment of the image, etc.

Can I use css for img elements?

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

Recommended: css video tutorial

1. CSS controls the size of the img image

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
img{
  width:120px;
  height:100px;
}
</style> 
</head> 
<body> 
<img src="mytest/div+css/border.jpg"/>
</body> 
</html>

Copy after login

The above code sets the length of the img image The widths are 120px and 100px respectively.

However, it should be noted that using css to roughly set the image size may cause deformation.

If you don’t want the image to be deformed, pay attention to the aspect ratio of the image.

2. Add a border to the img image

In actual application, a border effect may be added to the image.

This can be achieved using the border attribute of CSS.

The code example is as follows:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
img{
    width:220px;
    height:100px;
    border:2px solid blue;
}
</style> 
</head> 
<body> 
<img src="mytest/div+css/border.jpg"/>
</body> 
</html>

Copy after login

The above code adds a blue border with a width of 2px to the img image.

For more information about borders, please refer to the CSS border chapter.

3. The img picture is used as a link

The picture is used as a link, that is, it is placed within .

The code example is as follows:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
img{
    width:40px;
    height:20px;
    border:2px solid blue;
    border:none;
}
</style> 
</head> 
<body> 
<a href="#"><img src="mytest/div+css/border.jpg"/></a>>
</body> 
</html>

Copy after login

The above code puts the image into the link , and click to achieve the jump action.

It is important to note that when you put the image into the link, the image may have unnecessary borders. Just add border:none.

4. Set the horizontal alignment of the picture

Just take setting the horizontal center alignment of the picture as an example. The code example is as follows:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css"> 
div{
  width:300px;
  height:300px;
  text-align:center;
  background-color:#ccc;
}
img{
  width:100px;
  height:100px;
}
</style> 
</head> 
<body> 
<div><img src="mytest/div+css/border.jpg"/></div>
</body> 
</html>

Copy after login

Use text-align Properties can be used to set the horizontal alignment of images.

It should be noted that this attribute is set on the container element of the image, not the image element itself.

5. Set vertical alignment of images

The following is a common code as a demonstration.

The text box and verification code are usually aligned horizontally, which is more beautiful.

The code example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<style type="text/css">
div img{ 
  vertical-align:middle
}
input{
  height:52px;
}
</style>
</head>
<body>
<div><input type="text"/><img src="mytest/demo/1.jpg"></div>
</body>
</html>

Copy after login

The above code can achieve the vertical alignment effect of the text box and the verification code.

The core code is as follows: