Question

我正在网站上工作.. 使用

<div class="parent_div">
  <div class="service-container">
    <div class="service_1 logo_bg">
      <h2>text</h2>
    </div>
  </div>
  <div class="about_wave_1">
    <svg height="25" viewBox="0 0 1440 25" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208"><path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z" data-reactid="209"></path>
		</svg>
  </div>
  <div class="about_wave_2">
    <svg height="25" viewBox="0 25 1440 25" xmlns="http://www.w3.org/2000/svg" class="sc-gqjmRU ewSzGA" data-reactid="208"><path d="M0 39.5062C144.0016 39.5062 144.0016 0 288.0032 0c143.9936 0 143.9936 39.5062 287.9873 39.5062C719.9842 39.5062 719.9842 0 863.9858 0s144.0016 39.5062 288.0032 39.5062C1295.9905 39.5062 1295.9905 0 1440 0v50H0V39.5062z" data-reactid="209"></path>
		</svg>
  </div>
  <div class="example"></div>
</div>

问题出在Chrome浏览器中，图片和视频已经过拉伸，在Firefox中它们很完美......

我已经验证了我的HTML和CSS，没有任何问题......

有人提出一些我可以尝试的建议吗？

我尝试过将flex放在图像和视频本身上，而且我一直在使用

display: flex;

和

flex: 1 1 auto;

我尝试了宽度，并没有触及高度

flex: 0 1 auto;

在这里，您可以看到HTML标记，以及与本节

链接在一起的CSS

Answer 1

如果图像是灵活容器的直接子项，我会为图像和视频设置flex: 0 0 auto;，因为您不希望它们增长或缩小（如果还没有完成，请设置图片height到auto）

带显示屏的图像：flex;在chrome上显示错误，在firefox中工作

1 个答案: