Question

我想设置<img>的高度以使用<h1></h1>的高度。

例如：<h1></h1>高度为10em，因此我希望<img>的高度为10 em。但问题是我不知道每个网络浏览器上<h1></h1>的确切高度。

我尝试将<img>的高度设置为百分比，但它确实无效。我该怎么办？

这是我的原始代码：

 <div class="row" style="margin-top: 1%;">
    <div class="large-9 columns">
        <h1><img src="img/UnionJR.png"> <a href="subjectlist.html#BrE" class="logo">English</a></h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        </p>
    </div>
    <div class="large-3 columns">
        <img src="http://placehold.it/350x150&text=Img">
    </div>
</div>

由于

Answer 1

我试过这个，这对Chrome有用。（我没有和其他人一起试过）

<h1><img src="img/UnionJR.png" style="height: 1em;"> <a href="subjectlist.html#BrE" class="logo">English</a></h1>

这似乎是解决这个问题的一种不好的方法，但对于简短的工作它会做。

无论如何，我还是想知道其他方法。请添加更多！

Answer 2

除非我在这里遗漏了某些内容，否则如果您的h1设置了特定的高度，例如

h1 {
  height: 10em;
}

你应该可以使用

h1 img {
  height: 100%;
}

如果父元素的特定高度设置，则百分比高度可以正常工作。刚尝试使用chrome并且它可以工作 - 图像占据了h1的高度。

 <html>
 <body>

 <div class="row" style="margin-top: 1%;">
    <div class="large-9 columns">
        <h1><img src="http://placehold.it/350x150&text=Img"> <a href="subjectlist.html#BrE" class="logo">English</a></h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        </p>
    </div>
    <div class="large-3 columns">
        <img src="http://placehold.it/350x150&text=Img">
    </div>
</div>

<style>
    h1 {
        height: 10em;
    }
    h1 img {
        height: 100%;
    }
</style>

 </body>
 </html>

Answer 3

我建议为<h1>和<img>标记设置一个类。

像

这样的东西

<h1 class='tall'>
  <img class='tall' src="img/UnionJR.png"> 
  <a href="subjectlist.html#BrE" class="logo">English</a>
</h1>

带有风格：

.tall {
  height: 800px;
}

但请记住，使用em意味着嵌套元素（如果使用em定义高度）将乘以其父高度。因此，如果您的标题是10 em，并且您的img是10 em，则图像实际上将显示为100em或高度。（10×10）。

我建议在这种情况下使用基于像素的高度，因为它赢得了compound the way the em does。

Answer 4

您可以为特定浏览器的CSS文件添加一些规则，并覆盖最初应用的任何样式：

h1 {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}

Answer 5

您可以为<h1>标记使用固定高度，并将height: inherit; max-height: 100%; min-height: 100%;应用于图像，以始终保持它们的高度相同。请注意，您的图片应具有特定尺寸，以避免在应用最小和最大高度样式时出现模糊。

img {
    height: inherit;
    max-height: 100%;
    min-height: 100%
}
h1 {
    height: 50px;
}

<强> DEMO

Answer 6

我知道这个问题已经过时了，但是我想为那些寻找像我这样的解决方案的人解答这个问题。

我找到的解决方案是使用此css

.imgh1 {
background-image: image.png;
background-repeat: no-repeat;
background-size: contain;
}

并将其应用于您的标题

<h1 class="imgh1">&nbsp;</h1>

如何将<img/>高度设置为<h1>的高度？</h1>

6 个答案: