Home > Article > Web Front-end > Can I use css for img elements?
Can I use css for img elements?
- 藏色散人Original
- 2021-01-11 09:26:053226browse
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.
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>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>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 3499910bf9dac5ae3c52d5ede7383485.
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>The above code puts the image into the link 3499910bf9dac5ae3c52d5ede7383485, 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>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>The above code can achieve the vertical alignment effect of the text box and the verification code.
The core code is as follows:
div img{
vertical-align:middle
}The above code should be set on the picture element itself.
The above is the detailed content of Can I use css for img elements?. For more information, please follow other related articles on the PHP Chinese website!