html - 我的 width 属性覆盖了 object-fit: contains

我正在为我的一个大学俱乐部开发一个信息板。我几乎完成了，除了我还有一个烦人的错误：中心图像在视口下方展开。

图像应该缩小和扩大以保持在两侧列之间，这是因为百分比widthcss 属性。但是，一旦图像底部与视口底部接触，我希望它不要进一步扩展；它应该保持居中。

在我的一生中，我无法找到一种解决方案，既能阻止它超出页面底部，又不会破坏图像的纵横比。

我以为我在做一些事情，object-fit: contain但可惜的是，似乎宽度总是优先于object-fit.

任何帮助将不胜感激，因为我对网络开发很陌生。

这是我到目前为止所拥有的客户端视图的链接： https ://jsfiddle.net/ydumcrnk/

标签： htmlcss

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