CSS：Firefox/Internet Explorer 中 flexbox 的图像缩放问题

Posted 2023-03-06

【中文标题】CSS：Firefox/Internet Explorer 中 flexbox 的图像缩放问题

【英文标题】：CSS: Image scaling issue with flexbox in Firefox/Internet Explorer

【发布时间】：2015-06-15 14:15:57

【问题描述】：

我正在尝试使用 flexbox 在我的内容流中并排放置两个图像。在 Chrome/Safari 中，它可以正确缩放图像，但在 Firefox/IE 中，纵横比不受尊重，图像失真。内容流的整体宽度取决于浏览器的宽度。随着窗口变窄，图像需要重新调整。

这是它在 Chrome/Safari (WebKit) 中的外观：

Aspect ratio respected http://pluto.justdied.com/w2box/data/chrome.PNG

虽然这是它在 Firefox/Internet Explorer 中的外观：

image stretches http://pluto.justdied.com/w2box/data/exhibit.PNG

这个 2 列视图包含一长串图像。

html 标记：

<div class="grid">
  <img src="../images/mille_bornes_02.jpg">
  <img src="../images/mille_bornes_08.jpg">
</div>

CSS如下：

.grid 
  z-index: 1;
  margin: 0px 0px 16.5px;
  position: relative;
  flex-direction: row;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0;
  border: 0;

.grid img 
  position: relative;
  display: block;
  margin-left: 16.5px;
  height: 100%;
  width: 100%;

.grid > img:first-child 
  margin-left: 0px;

我尝试过调整大小，但最终还是会在 Firefox/IE 中出现某种形式的失真。关于如何修复它的任何想法？我希望使用 flexbox 来避免用 javascript 强制它。

两个源图像共享相同的高度和宽度。

我们将不胜感激所有反馈和帮助！

谢谢！

【问题讨论】：

您的代码没问题，但 .grid 中的自动高度可能是 FF 中的问题。这在 FF 中看起来不错——jsfiddle.net/12dn6wbe——你可能需要指定像素

不幸的是，当浏览器/窗口的宽度减小时，jsfiddle 中的图像会失真。

是的，我刚刚看到了，等一下，我会给你一个更好的解决方案

你去。我将屏幕分成 2 个相同 h/w 的框，并更改了要包含的图像的 css。如果它对你有用，那就把它作为答案——@ 987654324@——坚持那是幽灵。该演示在 FF 中运行良好，但在 Chrome 中运行良好。奇数

你去吧，一个适用于所有浏览器的解决方案。 -- jsfiddle.net/kd2qntbv

【参考方案1】：

无法找到一个良好的跨浏览器支持的 CSS 解决方案我制作了以下 JavaScript 函数，可以在页面加载和调整窗口/浏览器大小时触发：

function adjustGrids() 
  var margin = 16.5;
  var grid = document.getElementsByClassName('grid');
  var gridWidth = grid[0].offsetWidth;

  for (var i = 0; i < grid.length; i++) 
    var images = grid[i].getElementsByTagName('img');
    for (var y = 0; y < images.length; y++) 
      images[y].style.width = ((gridWidth - margin) / 2) + 'px';
    
  

此解决方案尊重图像之间的固定边距，并遍历页面上所有相似的“网格”。

如果有人有更好的解决方案，我会全力以赴！

【参考方案2】：

我没有深入了解您的具体情况，但我在尝试解决 Firefox 上 flex 容器内的图像倾斜的类似问题时遇到了您的问题。

我的解决方案是在图像中添加object-fit: contain 并固定 FF 中的纵横比。

如果有帮助，迟到总比没有好！

【讨论】：

这只是帮助我解决了与您相同的问题，与您的情况相同。谢谢分享！可以在这里找到更多信息：developer.mozilla.org/en-US/docs/Web/CSS/object-fit

【参考方案3】：

将您的 img 包装在块级元素中。 （我刚刚遇到了同样的问题）

<div class="grid">
  <div><img src="../images/mille_bornes_02.jpg"></div>
  <div><img src="../images/mille_bornes_08.jpg"></div>
</div>

并且您的 css 应该针对 <div> 而不是 <img />

【讨论】：

就我而言，我使用<div> 作为包装器/flex，然后使用<figure><img /></figure>