javascript - Chrome 会拉伸(stretch)网站图片,Edge、IE、Firefox 不会

标签 javascript html css google-chrome

我很难理解为什么 https://www.kerkradio.za/index.php 主页上的图片显示拉伸(stretch)。我不是 CSS 的专家,但在 IE、FF 和 Edge 中它们都可以很好地显示图像。我在这里 ( Chrome is stretching my images vertically, however everything works fine in Firefox/Edge ) 找到了一个解决方案的引用,但它并没有真正帮助。

我查看了将图像高度和宽度设置为自动并将其更改为 100% 的实例。没有运气。我确定我在 css-es 中遗漏了一些东西。

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

我已经用了 3 个多小时了。

最佳答案

我猜你需要从这个选择器中删除高度:

.card-img img

看起来像一些不同的行为 flexbox 和图像计算尺寸。所以 img 包含:

width: 100%;
height: 100%;

chrome 将图像扩展到 100% 原始高度,而 firefox 图像调整到 100% 容器高度

关于javascript - Chrome 会拉伸(stretch)网站图片,Edge、IE、Firefox 不会,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55881604/

相关文章:

php - JSON 的双重编码

javascript - 尝试验证是否选择了单选按钮

css - 为任意深度的嵌套列表设置样式

javascript - 在谷歌图中插入空值

javascript - 使用 JavaScript 或 Puppeteer 检测页面上的元素是否可见

java - 使用 java.util.regex 的 HTML 正则表达式

c# - Onclientclick如何使用Javascript更改表格的背景颜色

html - Bootstrap 输入组插件对齐问题

html - CSS 选择选项错误

jquery - 当您在其外部单击时,Bootstrap 3 移动导航会崩溃