使用对象位置将图像移动一些像素

Question

我正在尝试在div内"移动"图像，该图像会随着object-fit: cover;和object-position: center;进行调整。

我的问题是：我可以在不从 css 中删除object-*的情况下将中心位置的图像向右移动几个像素吗？

.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>

我不想像.after那样调整图像大小，而是在div 中将图像向右/向左移动px几步。有没有办法做到这一点？

Answer 1

是的，只需调整object-position值即可。该属性的工作方式与background-position相同

对象位置属性确定被替换元素在其框内的对齐方式。<position>值类型(也用于背景位置)在 [CSS-VALUES-3] 中定义，并使用具体对象大小作为对象区域和内容框作为定位区域进行解析。^裁判

相关问题：在线性渐变上使用具有背景位置的百分比值

.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

您可以通过在relative位置上设置left或rightcss属性来移动图像，如下所示<img>标签。

.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

用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

现在你的图像尺寸没有改变...请看一看。

.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>

请看一看...你需要这样吗？

Answer 5

你可以像这样在div内移动img：

.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>