Move image some pixels with object-position

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?

benhatsor · Answer 1 · 2020-10-16T08:35:18.203

0

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>

edited Oct 16 '20 at 08:35

answered Oct 16 '20 at 08:29

benhatsor

1,863
6
20

That would work, but my client wants to keep the `div` (and also, the image) dimension, which in this case would be 150x150. If I apply padding, it turns to 160x150, isn't it? – Oct 16 '20 at 08:32
You can fix that by adding to the parent div `box-sizing: border-box`. I changed the answer above ^ – benhatsor Oct 16 '20 at 08:34

score 0 · Answer 2 · answered Oct 16 '20 at 08:30

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>

Ishita Ray · Answer 3 · 2020-10-16T08:50:20.343

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?

Thanks for the answer! If u inspect the first `div`, you can see the first image is "out" of the 'div'. Your answer might work tho, only if we could solve the first image problem — , Oct 16 '20 at 08:45

score 0 · Answer 4 · answered Oct 16 '20 at 08:56

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>

score 0 · Accepted Answer · answered Oct 16 '20 at 20:10

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>

That's what I was looking for! Thanks a lot! – Oct 19 '20 at 08:16 — , Oct 19 '20 at 08:16

Move image some pixels with object-position

5 Answers5