时间戳

首页 > 解决方案 > 如何缩小图像以适合 HTML5 中的标题

html - 如何缩小图像以适合 HTML5 中的标题

问题描述

我正在尝试包含具有以下尺寸的图像： 宽度 450 像素 高度 250 像素 在具有高度高度的标题的左角：60px; 但是它不会留在标题 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 -->

先感谢您。

标签： htmlcss

解决方案

现在你正在使用object-fit: cover它将扩展图像直到它覆盖它的整个容器。

要调整图像大小以适合其容器并保持其纵横比，您可以使用object-fit: contain或object-fit: scale-down.

您可以在此处阅读有关此 CSS 属性的更多信息。

推荐阅读