如何修复在 Firefox 上有效但在 Chrome 和 Safari 上无效的响应图像？

Question

我有一个 row 和一堆 img，它们的大小受高度限制，它们在 Firefox 上显示正确，但在 Chrome 和 Safari 上会拉伸。

火狐

Chrome

野生动物园

HTML:

<div class="container-fluid text-center" style="padding-top: 15px">
  <h6 class="card-subtitle mb-2 text-muted">Tools & Software</h6>
  <div class="row justify-content-center">
    <img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite">
    <img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer">
    <img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS">
    <img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows">                
    <img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite">
    <img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer">
    <img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS">
    <img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows">                
    <img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite">
    <img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer">
    <img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS">
    <img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows">                
    <img src="img/icons/adobe.png" class="skill-icon" alt="Adobe Creative Suite" data-toggle="tooltip" data-placement="top" title="Adobe Creative Suite">
    <img src="img/icons/gravit.png" class="skill-icon" alt="Gravit Designer" data-toggle="tooltip" data-placement="top" title="Gravit Designer">
    <img src="img/icons/macos.png" class="skill-icon" alt="macOS" data-toggle="tooltip" data-placement="top" title="macOS">
    <img src="img/icons/windows.png" class="skill-icon" alt="Windows" data-toggle="tooltip" data-placement="top" title="Windows">              
  </div>
</div>

CSS:

.skill-icon {
    width: auto;
    height: 50px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
}

我如何才能在其他浏览器上拥有在 Firefox 上拥有的尺寸和响应能力？提前致谢！

Answer 1

父行的 flexbox 似乎打乱了您的样式。只需将行的样式更改为适合您需要的其他样式，例如 display: block;或显示：内联；

这应该可以解决问题。

Answer 2

问题存在于：

* {
    box-sizing: border-box;
}

我无法判断哪个浏览器可以正确呈现图像，但您可以通过设置为默认值来均衡它们：

.skill-icon {
    box-sizing: content-box;
}

或删除填充。

第一个解决方案JSFiddle here。

更多关于 box-sizing。

如何修复在 Firefox 上有效但在 Chrome 和 Safari 上无效的响应图像？

How to fix a responsive image that works on Firefox but not on Chrome and Safari?

html

css

responsive-design

bootstrap-4