如何修复适用于 Firefox 但不适用于 Chrome 和 Safari 的响应式图像？答案

【问题标题】：How to fix a responsive image that works on Firefox but not on Chrome and Safari?如何修复适用于 Firefox 但不适用于 Chrome 和 Safari 的响应式图像？
【发布时间】：2019-11-08 13:43:00
【问题描述】：

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

火狐

铬

野生动物园

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 上的尺寸和响应能力？提前致谢！

【问题讨论】：

标签： html css responsive-design bootstrap-4

【解决方案1】：

问题存在时我们有：

* {
    box-sizing: border-box;
}

我不知道哪个浏览器可以正确渲染图像，但您可以通过设置为默认值来均衡它们：

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

或通过删除填充。

第一个解决方案JSFiddle here。

更多关于box-sizing。

【讨论】：

box-sizing: content-box; 为我做了这件事。谢谢！

【解决方案2】：

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

这应该可以解决问题。

【讨论】：