如何在CSS中添加等于图像宽度一半的负边距? [英] How to add a negative margin equal with the half of the image's width in css?

问题描述

我正在使用 height:100vh; 的图像，因此，根据屏幕的分辨率，其大小会发生变化.我想给它添加一个负的左边距，等于其宽度的一半(取决于屏幕分辨率).有什么解决方案只能使用CSS吗?

I am using an image with height: 100vh;, so based on the screen's resolution its size changes. I would like to add a negative left margin to it, equal with the half of its width (which depends on the screen resolution). Any solution to do this only with CSS?

推荐答案

如果负负位置取决于元素宽度( half )，则可以执行以下操作:

If the negative left position is dependant on (half) the element width you can do like:

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

这篇关于如何在CSS中添加等于图像宽度一半的负边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！