带有图像的 div 未显示在 d-flex flex-column 中答案

【问题标题】：div with image is not showing in d-flex flex-column带有图像的 div 未显示在 d-flex flex-column 中
【发布时间】：2020-06-03 03:53:58
【问题描述】：

结构是：

<div className="d-flex flex-column">
  <div>
     Text
  </div>
  <div style={{ backgroundImage: 'url(...)' }}>
  </div>
</div>

网址有效。 div 存在，但图像未显示当我使用 flex-row 时，它可以工作

【问题讨论】：

给出div的高度和宽度，看看图片是否出现
@Andus 它出现了，如果我将宽度 100% 高度 100%，它会削减图像的高度
div 如果没有明确的高度/宽度本身或仅在其子项中，则无法直观地看到，因为您现在看到您的图像，您可以使用 object-fit: contain 或 object-fit: cover 来解决这个问题，根据您的偏好
这可能对stackoverflow.com/questions/39195687/…有帮助

标签： html css reactjs bootstrap-4 flexbox

【解决方案1】：

再添加两个样式 background-size: contain;background-repeat: no-repeat;

<div class="d-flex flex-column">
  <div>
     Text
  </div>
  <div style="background: url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png);background-size: contain;background-repeat: no-repeat;">
  <br><br><br><br>
  </div>
</div>

【讨论】：