html - 如何在 css 中添加等于图像宽度一半的负边距？

Question

我正在使用 height: 100vh; 的图像，因此根据屏幕的分辨率，它的大小会发生变化。我想给它添加一个负的左边距，等于它宽度的一半(这取决于屏幕分辨率)。有什么解决方案可以仅使用 CSS 来做到这一点吗？

Answer 1

如果左负位置取决于(一半)元素宽度，您可以这样做:

transform: translateX(-50%);

*{margin:0;}

.halfThere {
  vertical-align: top;
  height: 100vh;
  transition: 0.4s;
  transform: translateX(-50%);
}
.halfThere:hover {
  transform: translateX(0%);
}

<img class="halfThere" src="//placehold.it/800x600/0bf">