css - 将超大图像保持在列表元素的中心

Question

我试图让超大图像在列表元素中水平居中。缩小窗口时，您会看到图像的右侧被隐藏。这是本应发生的事情，但我希望原始图像保持居中，从而隐藏在左侧和右侧。有人可以帮忙吗？

FIDDLE HERE

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

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

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

Answer 1

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

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

jsFiddle