div背景适合div大小

Question

我的div包含两个div。就像您在网页中看到的一样，它们的尺寸为50/50。图片所在的第二个div必须扩展到div的大小。现在只适合宽度。

该容器div的高度为600px。

我可以使它填满整个600px的高度，但是然后重复img或用颜色填充该额外的空间。我希望img在所有设备中都很好地填充该区域。

.etusivun_teksti {
  margin-top: 0px;
  display: inline-block;
}

.etusivu-div-2 {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 600px;
}

.etusivun_kuva {
  margin: 0px;
  background-image: url("http://www.jsdkqwoj.eu/wp-content/uploads/2020/02/startup-849804-scaled.jpg");
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .etusivun_kuva {
    margin-bottom: 0px;
    background-size: cover;
    height: 600px;
    background-position: 50% 40%;
  }
  .row {
    flex-direction: column-reverse;
  }

<?php get_header();?>
<div class="logodiv justify-content-center">
  <div class="logo">
    <img src="http://www.jsdkqwoj.eu/wp-content/uploads/2020/02/frontpage_logo_v5.svg">
  </div>

  <div name="yritys" class="etusivu-div-2">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm pt-5 pb-5">
          <h1>MIKÄ HOSSIMOSSI?</h1>
          <div class="etusivun_teksti" data-aos="fade-up">
            <?php if (have_posts()) : while(have_posts()) : the_post();?>
            <?php the_content();?>
            <?php endwhile; endif;?>
          </div>
        </div>
        <div class="col-sm etusivun_kuva"></div>
      </div>
    </div>
  </div>
  <?php get_footer();?>

这是我的网站：http://www.jsdkqwoj.eu/（临时地址）

Answer 1

如果我的理解正确，那么您希望<div>容器容纳标题为“ HOSSIMOSSI”的背景图像，以覆盖视口的整个高度。

在实时网站中，您可以调整logodiv类，使其高度等于视口屏幕：

.logodiv {
    width: 100%;
    height: 100vh;
    display: flex;
    margin: 180px 0 180px 0;
}

注意：这同样适用于较小的设备。