Move image some pixels with object-position - css

Question

I am trying to "move" an image inside a div which is adjusted with object-fit: cover; and object-position: center;.
My question is: Can I move the center-positioned image a few pixels to the right without to remove the object-* from my css?
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
}
.myDiv.before img {
width: 100%;
height: 100%;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.general {
display: flex;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>
I would like to NOT resize the image as in .after, but moving the image a few px right/left in the div. Is there a way to do it?

Answer 1

Yes, simply adjust the object-position value. The property works the same way as background-position
The object-position property determines the alignment of the replaced element inside its box. The <position> value type (which is also used for background-position) is defined in [CSS-VALUES-3], and is resolved using the concrete object size as the object area and the content box as the positioning area. ref
Related question: Using percentage values with background-position on a linear-gradient
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
}
.myDiv.before img {
width: 100%;
height: 100%;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.myDiv.after.moved img {
object-position:calc(50% + 10px) 50%; /* the fix is here ! */
}
.general {
display: flex;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after moved">
<img src="https://via.placeholder.com/400x250">
</div>
</div>

Answer 2

You can move the images by setting left or right css attribute on the relative position as follows on <img> tag.
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
}
.myDiv.before img {
width: 100%;
height: 100%;
position: relative;
left: 10px;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: relative;
right: 10px;
}
.general {
display: flex;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>

Answer 3

Do it with padding.
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
/* Move the image left or right */
padding-left: 10px;
/* padding-right: 10px */
box-sizing: border-box;
background: blue;
}
.myDiv.before img {
width: 100%;
height: 100%;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.general {
display: flex;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>

Answer 4

Right now your image dimension is not changing... Please have a look.
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
}
.myDiv.before {
position: relative;
left: 20px;
}
.myDiv.before img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.general {
display: flex;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>
Please have a look...do you need like that way?

Answer 5

You could just move the img inside your div like this:
.myDiv img { position: relative; left: 10px; //or top, bottom, right }
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
/* just for demo purpose */
background-color: green;
}
.myDiv.before img {
width: 100%;
height: 100%;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.general {
display: flex;
}
.myDiv img {
position: relative;
left: 10px;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>