übergroßes Bild in der Mitte des Listenelements behalten

Question

Ich versuche, ein übergroßes Bild horizontal in einem Listenelement zentriert zu erhalten. Wenn Sie das Fenster verkleinern, sehen Sie, dass die rechte Seite des Bildes ausgeblendet wird. Dies soll geschehen, aber ich möchte, dass das Originalbild zentriert bleibt und somit links und rechts versteckt wird. Kann mir bitte jemand helfen?

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

Sie versuchen position + transform Tricks können.

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

jsFiddle