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;
}

Примечание : это будет работать и для небольших устройств .