CSSの画像の幅の半分に等しい負のマージンを追加するにはどうすればよいですか？

Question

height: 100vh;の画像を使用していますので、画面の解像度に基づいてサイズが変わります。私は、画面の解像度に応じて幅の半分に等しい負の左マージンを追加したいと思います。 CSSでのみこれを行うためのソリューションはありますか？

Answer 1

負の左の位置は（半分）に依存している場合は以下のように行うことができ、素子幅：

transform: translateX(-50%); 

迅速なデモ：

*{margin:0;} 
 

 
img { 
 
    vertical-align: top; 
 
    height: 100vh; 
 
    transform: translateX(-50%); 
 
}

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

をし、ホバーアニメ

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