How do I set the <img> height to be the <h1> height?
I want to set the height <img>
to use the height <h1></h1>
.
For example: the height <h1></h1>
is 10EM, so I want the height to be 10em <img>
.
But the problem is that I don't know the exact height <h1></h1>
in every web browser.
I tried to set the height <img>
as a percentage but it didn't work. What should I do?
Here is my original code:
<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>
thank
source to share
I've tried this and similar works for Chrome. (I have not tried with others)
<h1><img src="img/UnionJR.png" style="height: 1em;"> <a href="subjectlist.html#BrE" class="logo">English</a></h1>
This seems like a bad way to solve this problem, but for the sake of short work this will be done.
Anyway, I still want to know other methods. Please add more!
source to share
If I am missing something here, if your h1 has a specific height set, eg.
h1 {
height: 10em;
}
you should be able to use
h1 img {
height: 100%;
}
Percentage heights are met if their parent has a specific height. Just tried it in chrome and it works - the image takes up h1 height.
<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>
source to share
I would suggest setting a class for the tag <h1>
and <img>
.
Something like
<h1 class='tall'>
<img class='tall' src="img/UnionJR.png">
<a href="subjectlist.html#BrE" class="logo">English</a>
</h1>
with style:
.tall {
height: 800px;
}
Remember, however, that using em means that nested elements (if the height is specified with em) will be multiplied by their parent height. So if your title is 10 em and your img is 10 em, the image will be rendered at 100 or high. (10x10).
I would suggest using pixel heights in this scenario, as it won't combine the way they work .
source to share
You can use a fixed height for the tag <h1>
and apply height: inherit; max-height: 100%; min-height: 100%;
to the image to always keep them the same height. Just keep in mind that your image must be sized to avoid blur when applying the minimum and maximum height styles.
img {
height: inherit;
max-height: 100%;
min-height: 100%
}
h1 {
height: 50px;
}
source to share
I know this question is old, however I want to answer it to anyone looking for a solution like me.
The solution I found was using this css
.imgh1 {
background-image: image.png;
background-repeat: no-repeat;
background-size: contain;
}
And apply it to your title like this
<h1 class="imgh1"> </h1>
source to share