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

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

例如:<h1></h1>的高度为10em，所以我希望<img>的高度也为10em。
但问题是我不知道<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>

谢谢

我尝试了这个，这种工作Chrome。(我还没有和其他人试过)

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

这似乎不是解决这个问题的好方法，但对于简短的工作来说，这是可行的。

无论如何，我还是想知道其他的方法。请补充更多!

除非我在这里错过了什么，如果你的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>

我知道这个问题很老了，但是我想为任何像我一样寻找解决方案的人回答这个问题。

我发现有效的解决方案是使用这个css

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

应用到你的页眉上，像这样

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

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

之类的

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

style:

.tall {
  height: 800px;
}

但是，请记住，使用em意味着嵌套元素(如果用em定义了高度)将乘以它们的父元素高度。如果你的标题是10em，你的img是10em，图像会以100em或高度显示。(10 x10)。

我建议在这种情况下使用基于像素的高度，因为它不会像em那样复合。

您可以为特定浏览器添加一些规则到CSS文件中，并覆盖原来应用的任何样式:

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

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

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

相关内容

最新更新

热门标签：