Блог

Главная - Вопросы по программированию - Получение размера в соответствии с размером вложенного

Получение размера в соответствии с размером вложенного

#html #css

#HTML #css

Вопрос:

Я новичок в html и css. Я пытаюсь настроить заголовок на адаптивной странице. Я завернул теги with и . Я могу изменить размер изображения, используя проценты в CSS, но внешняя оболочка фигуры продолжает сохранять ширину исходного изображения и не изменится. Я попытался установить те же проценты и для элемента, но безрезультатно. Даже попробовал другое изображение, и оно сделало то же самое. Инструменты разработчика не дают мне никакого намека на то, что заставляет это происходить. Спасибо за любую помощь!

 header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  background-color: #173873;
  padding: 15px 0;
}

header .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  margin: 0;
}

figure {
  margin: 0;
  padding: 0;
}

.logo img {
  width: 30%;
  height: 30%;
}

.nav-title h1 {
  font-size: 3em;
  color: #fff;
}

.nav-title h6 {
  font-size: 1em;
  color: #fff;
}

.topnav {
  overflow: hidden;
  background-color: #173873;
} 
 <header>

  <div class="container">

    <div>
      <figure class="logo">
        <a href="">
          <img src="https://picsum.photos/id/1/800/800" alt="Parakaleo"></a>
      </figure>
    </div>

    <div class="nav-title">
      <h1>Parakaleo</h1>
      <h6>Bookkeeping</h6>
    </div>

    <nav class="topnav" id="myTopnav">
      <a href="#home" class="active">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </nav>

  </div>
  <!-- End of container -->


</header>
<!-- End of header -->

Метки: