html - 图片高度应该是父元素的高度

Question

标题部分中我的 Logo 应始终与父级高度相同。

HTML

<header>
   <div id="logo">
      <a href="/">
         <img src="img/logo.png" alt="Logo" />
      </a>
   </div>
</header>

CSS

*, *:before, *:after {
   box-sizing: border-box;
}

header {
  background-color: rgb(255,255,255);
  height: 50px;
  padding: 10px;
}

header #logo img {
  height: auto;   
  max-height: 100%;
  max-width: 100%;
}

Answer 1

您可以更改 <img>到 <div>然后使用 background-image和 background-size: contain .请注意，这是一个 256 x 256 像素的图像，但是 background-size: contain会将图像塞入 <div> 中没有裁剪或变形的尺寸。此外，由于 Logo 现在是 <div> ( block 级元素)而不是 <img> (行内元素)，一个 height:100%将按照您期望的方式工作。

引用如下

片段

#logo {
  height: 100%;
  width: 100%;
}
.img {
  background: url(https://www.w3.org/html/logo/downloads/HTML5_Badge_256.png) no-repeat;
  background-size: contain;
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}
header {
  background-color: rgb(255, 255, 255);
  height: 50px;
  padding: 10px;
}
#logo {
  height: 100%;
  width: 100%;
}
.img {
  background-image: url(https://www.w3.org/html/logo/downloads/HTML5_Badge_256.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
}

<header>
  <div id="logo">
    <a href="/">
      <div class="img"></div>
    </a>
  </div>
</header>

引用资料:

• background-image

• background-size

• Replaced and non-replaced element height