我的宽度属性正在覆盖object-fit: contain

Question

我正在为我的一个大学俱乐部开发一个信息板。我几乎完成了它，除了我留下了一个恼人的bug :中心图像在视口下面展开。

图像应该收缩和扩展，以停留在两个边栏之间，这是因为百分比width css属性。但是，我希望一旦图像的底部与视口的底部接触，它就不会进一步扩展；它应该简单地保持居中。

对于我的生活，我找不到一个解决方案，既能阻止它超出页面底部，又不会破坏图像的纵横比。

我以为我在用object-fit: contain做了一些事情，但是可惜的是，width似乎总是优先于object-fit。

任何帮助都会非常感谢，因为我对web dev非常陌生。

下面是我目前所拥有的客户端视图的链接：https://jsfiddle.net/ydumcrnk/

Answer 1

你看过display: flex吗？您可以在三个.column类周围包装一个div，为该容器div提供一个属性display:flex，然后您可以添加一些后续属性，这些属性将以您想要的方式排列.column类。

Here is a page on the subject I reference often.