div 背景适合 div 大小

Question

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

该容器 div 的高度为 600 像素。

我可以让它填满整个 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

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

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

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

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