html - 带有图像的 Flex 布局在 Firefox 中调整大小不均匀

Question

我有一个布局，它利用 flex 将不同大小的图像放在一起。 但是，当我在 Firefox 中调整浏览器大小时，图像不会均匀缩放。

我已经阅读了很多关于导致问题的原因的帖子，但我很难在信息海洋中找到适合我的特定场景的解决方案。有人有什么想法吗？

Firefox 中发生中断的图像。

*{box-sizing: border-box;}

.container{
  max-width: 1360px;
  margin: 0 auto;
}

img{
  border:2px solid white;
}

.flex-row {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.flex-column{
  align-items: flex-start;
  height: 100%;
  max-width: 1360px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 600px) {
  .flex-column, .flex-row{
    display: block;
  }
  img{
    width: 100%;
  }
}


<div class="container">
<div class="flex-row row">
  <div class="flex-column">
    <div><img src="https://placehold.it/548x227"></div>
    <div><img src="https://placehold.it/548x459"></div>
  </div>
  <div class="flex-column">
    <div class="flex-row">
      <div><img src="https://placehold.it/812x459"></div>
    </div>
    <div class="flex-row bug">
      <div><img src="https://placehold.it/406x227"></div>
          <div><img src="https://placehold.it/406x227"></div>
    </div>
  </div>
</div>
<div class="flex-row row">
  <div><img src="https://placehold.it/812x459"></div>
  <div><img src="https://placehold.it/548x459"></div>
</div>
</div>

这是代码的链接:https://codepen.io/enigmas2/pen/zZYPJj

Answer 1

我很确定 firefox 的 flex-box 被窃听了。列似乎无法正常工作。

尽管如此，您还是可以使用 float 属性实现相同的目的。然而，它花费的代码比我预期的要多。

一个潜在的问题是很多元素都有固定的高度。正如我之前提到的，这样做的另一个问题是图像将被裁剪。 (注意宜家和 cheerio 的标志。这是因为它们的宽度远远大于它们的高度)。

here is a codepen.

body {
  margin: 0;
}

  #container {
    width: 75vw;
    height: 1145px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  
    #row-one {
      width: 75vw;
      display: block;
    }
    
      #left-column {
        width: 40.294117647058823529411764705882%;
        height: 686px;
        float: left;
        display: flex;
        flex-direction: column;
      }
      
        #top-left-image {
          width: 100%;
          height: 227px;
          background: url('https://i.ytimg.com/vi/cNGG2SswaKo/maxresdefault.jpg') center/cover;
        }
        
        #middle-left-image {
          width: 100%;
          height: 459px;
          background: url('https://s-media-cache-ak0.pinimg.com/originals/8b/da/34/8bda3460f271a77a54b4cfc08583b1fc.jpg') center/cover;
        }
      
      #right-column {
        width: 59.705882352941176470588235294118%;
        height: 686px;
        float: right;
        display: flex;
        flex-direction: column;
      }
      
        #top-right-image {
          width: 100%;
          height: 459px;
          background: url('http://cdn.designcrowd.com.s3.amazonaws.com/blog/Famous-Purple-Logos/1-famous-purple-logos.png') center/cover;
        }
        
        #right-column-row {
          width: 100%;
        }
        
          #middle-middle-image {
            width: 50%;
            height: 227px;
            float: left;
            background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Ikea_logo.svg/1024px-Ikea_logo.svg.png') center/cover;
          }
          
          #middle-right-image {
            width: 50%;
            height: 227px;
            float: right;
            background: url('https://s-media-cache-ak0.pinimg.com/originals/f9/bd/c8/f9bdc85df698cd33535f3517659b9c03.jpg') center/cover;
          }
    
    #row-two {
      width: 75vw;
      height: 459px;
      display: block;
    }
    
      #bottom-left-image {
        width: 59.705882352941176470588235294118%;
        height: 459px;
        float: left;
        background: url('http://logok.org/wp-content/uploads/2014/11/Sprite-logo-2014.png') center/cover;
      }
    
      #bottom-right-image {
        width: 40.294117647058823529411764705882%;
        height: 459px;
        float: right;
        background: url('https://s-media-cache-ak0.pinimg.com/736x/58/6f/a9/586fa96b662feb46fd10d179a3f5308d.jpg') center/cover;
      }

@media screen and (max-width: 768px) {
  
  #left-column, #right-column, #right-column-row, #bottom-left-image, #bottom-right-image {
    width: 100%;
    float: none;
  }
  
  .some-images {
    width: 100%;
  }
  
}

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="a.css">
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
  <div id="container">
    <div id="row-one">
      <div id="left-column">
        <div class="not-all-images" id="top-left-image"></div>
        <div class="not-all-images" id="middle-left-image"></div>
      </div>
      <div id="right-column">
        <div class="not-all-images" id="top-right-image"></div>
        <div id="right-column-row">
          <div id="middle-middle-image"></div>
          <div id="middle-right-image"></div>
        </div>
      </div>
    <div>
    <div id="row-two">
      <div class="not-all-images" id="bottom-left-image"></div>
      <div class="not-all-images" id="bottom-right-image"></div>
    </div>
  </div>
</body>
</html>