Jquery 如何使IMG匹配2列响应布局中的行高度？

我有一个2列响应式布局，如您在中所见

如果从全宽桌面浏览器开始，并不断减小浏览器的宽度（例如视口宽度870px），您将看到布局开始看起来很奇怪，因为照片不再是行/父容器/文本块的高度

有没有人知道一个解决方案，我可以让照片与行的高度相同？我想他们需要对照片的左右两侧进行一定程度的裁剪，以确保它合适

我想要的效果和背景一样：封面，但我想在页面内容中使用真实的图像

我不能改变HTML布局的结构，但可以添加CSS和一些javascript

解决方案需要是一个“编程”到网站中的解决方案，这样非技术人员就可以轻松插入具有这种效果的照片。此外，解决方案需要可扩展，即如果我在一个网站上这样做100次，我只想上传一张照片

有人知道我能做这件事的方法吗

---

谢谢

添加三张不同比例的照片，然后使用媒体查询决定哪张照片应该显示，怎么样？谢谢伊恩，我现在已经澄清了这个问题。解决方案需要是一个“编程”到网站中的解决方案，这样非技术人员就可以轻松插入具有这种效果的照片。此外，解决方案需要可扩展，即如果我在一个网站上执行此操作100次，我只想上传一张照片，而不是300张。百分比高度有什么问题？百分比高度会给我一个扭曲的图像？