css - 将过大的图像保留在列表元素的中心

我试图获取一张过大的图像，以使其在列表元素内水平居中。缩小窗口时，您会看到图像的右侧被隐藏。这就是要发生的情况，但是我希望原始图像保持居中，从而隐藏在左侧和右侧。有人可以帮忙吗？

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>

最佳答案

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

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

jsFiddle

关于css - 将过大的图像保留在列表元素的中心，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41911777/