时间戳

首页 > 解决方案 > 响应式图像 div 问题中的中心 div

svg - 响应式图像 div 问题中的中心 div

问题描述

我正在尝试使用 Flexbox 使 div 居中。

这是我的标记：

<header class="container">
  <div class="bg-image">
    <div class="logo">
      <h1>hello</h1>
    </div>
  </div>
  <!-- .masthead-->
</header>

我使用纵横比方法使 bg-class 中的背景图像响应于background-size: contain，使用的图像的高度为 600 像素，宽度为 800 像素，给我一个 75% 的纵横比，我将其用作填充顶部。

但是，当我尝试使用 Flexbox 将 h1 在我的 logo 类中居中时，使用这种方法来实现响应式背景图像不起作用。

这是我的CSS：

.container{
  display:flex;
  height: 100vh;
  justify-content: center;
  align-items: center;


    //padding-top: 75%;
    background: url("https://i.pinimg.com/originals/92/4d/31/924d316f8791c2c7f167ad189950d172.jpg")
      no-repeat center;
    background-size: contain;
}

禁用 padding-top 会使 logo 类居中，但无法实现我想要的响应式图像，因为它会根据屏幕空间在侧面或顶部和底部创建空间。

有没有一种方法可以在不裁剪它的情况下实现响应式图像background-size: cover;，我仍然想使用background-size: contain;并在 bg-image 类中水平和垂直居中 div。我计划在徽标类中有一个 svg 徽标，我希望将其集中在 bg-image 类中。

我很感激所有的意见。

标签： svgflexboxresponsive-images

解决方案

推荐阅读