リスト要素の中心にオーバーサイズのイメージを維持する

Question

リスト要素内の中央に水平になるように大きめのイメージを取得しようとしています。ウィンドウを縮小すると、画像の右側が非表示になります。これは何を意味するのですか、私は元の画像を中央に残して、隠された左右になるようにします。誰でも助けてくれますか？

FIDDLE HERE

#photo-container{ 
 
list-style-type: none; 
 
width:100%; 
 
overflow:hidden; 
 
text-align: center; 
 
} 
 

 
.photo{ 
 
width:100vw; 
 
min-width:600px \t 
 
}

<div> 
 
<ul> 
 
<li id="photo-container"> 
 
\t <img class="photo" src="https://brianrashid.com/wp-content/uploads/2015/09/NYC-FORBES-1940x970.jpg"> 
 
</li> 
 
</ul> 
 
</div>

Answer 1

あなたはposition + transformトリックを使用して試すことができます。

.photo { 
    ... 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
} 

jsFiddle