将超大图像保留在列表元素的中心

Question

我试图让一个超大的图像在列表元素中水平居中。向下缩放窗口时，您会看到图像的右侧隐藏。这就是意味着发生的事情，但我希望原始图像保持居中，从而隐藏左右两侧。有人可以帮忙吗？

FIDDLE HERE

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试使用position + transform技巧。

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

<强> jsFiddle