Chrome不会拉伸网站图片，而Edge，IE，Firefox则不能

Question

我发现很难弄清楚为什么https://www.kerkradio.za/index.php主页上的图像出现了拉伸现象。 我对CSS还是一无所知，但在IE，FF和Edge中，它们都可以很好地显示图像。 我在这里找到了一种解决方案的参考（ Chrome正在垂直拉伸图像，但是在Firefox / Edge中一切正常 ），但这并没有真正的帮助。

我看过一些实例，其中图像的高度和宽度设置为自动，并将其更改为100％。 没运气。 我确定我在CSS-ES中缺少某些内容。

请参考https://www.kerkradio.co.za/index.php的代码。 向下滚动到显示所有教堂图像卡的位置。

我到这里已经三个多小时了。

Answer 1

我猜您需要从此选择器中删除高度：

.card-img img

看起来像一些不同的行为flexbox和图像计算大小。 因此img包含：

width: 100%;
height: 100%;

chrome将图片扩展到原始高度的100％，而Firefox图片将尺寸调整为容器高度的100％