How To Position An Image
How to position an image in CSS is a problem that many programmers, especially beginners, face. This article explains and shows the methods you can use to position the image.
In CSS, you can position an image in a variety of ways, including by using the object-position property or the float property (which aligns elements to the left or right).
The Object-position Property To Position An Image
The CSS object-position property describes how the content is aligned within the container. It works in conjunction with the object-fit property to specify the x/y positioning of elements like <video> and <img> within content boxes.
All images are automatically centered in their content boxes when using the object-fit property because the default value for object-position is 50% 50%. The object-position property allows us to modify the default alignment.
The position of the video or image within the container is determined by the position value of the object-position property. It takes two numbers, the first of which controls the x-axis and the second of which controls the y-axis. In order to position the image in the container, we can use a string like left, right, center, etc. Invalid values are permitted.
Here are some examples that will help us understand it better.
Example
In this example, we will use the string values such as “center top”, “right top”, and “left top” to position the image.
<!DOCTYPE html>
<head>
<title> CSS object-position property Example </title>
<style>
#center {
width: 400px;
height: 150px;
border: 5px solid blue;
background-color: brown;
object-fit: none;
object-position: center top;
}
#left {
width: 400px;
height: 150px;
border: 5px solid blue;
background-color: brown;
object-fit: none;
object-position: left top;
}
#right {
width: 400px;
height: 150px;
border: 5px solid blue;
background-color: brown;
object-fit: none;
object-position: right top;
}
</style>
</head>
<body>
<h3>object-position: center top;</h3>
<img id = "center" src= "cat.png"/>
<h3>object-position: left top;</h3>
<img id = "left" src= "cat.png"/>
<h3>object-position: right top;</h3>
<img id = "right" src= "cat.png"/>
</body>
</html>
Now, observe another example of using the object-position property.
Example 2
In this instance, we’re using the initial setting that centered the image. It is so because the initial values the property to 50% 50%, which is its default value. Additionally, we use the numbers 200px and 100px.
<!DOCTYPE html>
<head>
<title> CSS object-position property Example</title>
<style>
#num {
width: 400px;
height: 250px;
border: 5px solid blue;
background-color: brown;
object-fit: none;
object-position: 200px 100px;
}
#init {
width: 400px;
height: 250px;
border: 5px solid blue;
background-color: brown;
object-fit: none;
object-position: initial;
}
</style>
</head>
<body>
<h3>object-position: 200px 100px;</h3>
<img id = "num" src= "cat.png"/>
<h3>object-position: initial;</h3>
<img id = "init" src= "cat.png"/>
</body>
</html>
The Float Property To Position An Image
A CSS float property allows an element to be pushed to the left or right, with other elements being able to wrap around it. The most common application for it is with images and layouts.
Only horizontal floatation is used for elements. As a result, only left or right-floating of elements is possible; up or downfloating is not. You can move a floated element as far to the left or right as you can. It simply means that a floated element may appear at either the screen’s far left or far right.
Observe the following example of using the float property to position an image.
Example
<!DOCTYPE html>
<head>
<title> CSS float property Example</title>
<style>
#left {
float: left;
}
#right {
float: right;
}
</style>
</head>
<body>
<img id = "left" src= "cat.png"/>
<img id = "right" src= "cat.png"/>
</body>
</html>To learn more about CSS, visit our CSS Tutorial Page.
