片段

Question

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

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

您可以将lines <- readLines("yourdata.txt")更改为<img>，然后使用<div>和background-image。请注意，这是一个256 x 256像素的图像，但background-size: contain会将图像填入background-size: contain的维度，而不会出现裁剪或失真。此外，由于徽标现在是<div>（块级元素）而不是<div>（内联级元素），因此<img>将按预期的方式工作。< / p>

以下参考

片段

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

参考文献：

Answer 2

@ zer00ne的答案肯定是我的方式，给你更多的控制。

旁注;你的标题设置为固定的50px高度。您只需在尺寸和位置上进行硬编码即可快速修复。

<head>

<style type="text/css">

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

header #logo img {
  height: 70px;
  margin-top: -10px; /*these can be removed and the height set to 50, but it will contain it within the padding*/
  margin-left: -10px;
}

</style>
</head>

<header>
   <div id="logo">
      <a href="http://placekitten.com/500/200">
         <img src="http://placekitten.com/500/200" alt="Logo" />
      </a>
   </div>
</header>

原始图像为500x200（http://www.placekitten.com <3）

图像高度应为父元素的高度

2 个答案:

片段