Как уменьшить изображение, чтобы оно поместилось в заголовке в HTML5

Question

Я пытаюсь включить изображение, которое имеет следующие размеры: Ширина 450 пикселей Высота 250 пикселей В левом углу заголовка, который имеет высоту: 60 пикселей; Однако это не остается в пределах заголовка div, я даже не вижу заголовок div после добавления структуры. Мое намерение состоит в том, чтобы уменьшить его, чтобы он поместился в заголовке, но при этом сохранял пропорции. Ниже применяется стиль:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/*----------------------------------------------
                                  header
              ----------------------------------------------*/

.header {
  height: 60px;
  background-color: white;
  /* Medium blue */
  font-family: Nirmala UI;
  margin: 0;
  padding: 0;
  outline: #3300FF dashed;
}

.header .imageframe img {
  float: left;
  margin-top: 0;
  margin-left: 1em;
  margin-right: 15em;
  object-fit: cover;
  width: 150px;
  height: 60px;
}

<div id="header">
  <div class="imageframe" id="imageFrame">
    <img src="images/TMone_Full_H.png" alt="TM One logo">
  </div>
  <!-- END imageFrame -->
</div>
<!-- END header -->
<div class='midfield'>
  <div class='sidebar'>
    <div class="sidebarNavContainer">
      <ul class="nav-list">
        <li class="nav-list-buttons">
          <a id="shellmenu_0" class="fa-nav-list-buttons-link" href="https://products.office.com/EN/home">HOME</a>
        </li>
        <li class="nav-list-buttons">
          <a id="shellmenu_0" class="fa-nav-list-buttons-link" href="https://products.office.com/EN/home">REVENUE</a>
        </li>
      </ul>
    </div>
    <!-- END of sidebarNavContainer -->
  </div>
  <!-- END of sidebar -->
  <div class='content'>

  </div>
  <!-- END of content -->
</div>
<!-- END of midfield -->

Заранее спасибо.

Answer 1

Прямо сейчас вы используете object-fit: cover, который будет расширять изображение до тех пор, пока он не покроет весь его контейнер.

Чтобы изменить размер изображения, чтобы оно поместилось внутри его контейнера, и сохранить его соотношение сторон, вы можете использовать object-fit: contain или object-fit: scale-down.

Подробнее об этом CSS property можно прочитать здесь .

Answer 2

Моя ошибка, код объявляет "заголовок" с id = "заголовок". CSS, который я определил, вызывает div с селектором класса. Я прошу прощения за беспокойство всех. Проблема уже была решена, как только я узнал об этом. Спасибо всем, кто ответил.